vue中renderfunctioncode有什么用

這篇文章主要介紹vue中render function code有什么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

申扎ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

vue核心執(zhí)行過(guò)程圖

vue中render function code有什么用

vue核心的執(zhí)行過(guò)程主要分為這幾個(gè)階段：

1）編譯模板，生成可復(fù)用的render function code(這是今天要重點(diǎn)解讀的)，這一步在vue實(shí)例的整個(gè)生命周期中只會(huì)執(zhí)行一次甚至零次，因?yàn)槲覀兛梢栽诖虬臅r(shí)候可以預(yù)編譯

2）生成watcher等核心渲染監(jiān)聽(tīng)，在整個(gè)vue實(shí)例的生命過(guò)程中持續(xù)發(fā)生著作用，對(duì)view和modal進(jìn)行雙向綁定

3）虛擬dom的diff比較，當(dāng)watcher監(jiān)聽(tīng)到data的變更的時(shí)候，就會(huì)根據(jù)注入新的data執(zhí)行render function code，生成新的虛擬dom，跟老的虛擬dom（第一次執(zhí)行的時(shí)候可能為空）進(jìn)行diff比對(duì)，不同的部分將寫入真實(shí)的dom

這幾個(gè)過(guò)程都會(huì)以源碼解析的方式分篇解讀，今天我們重點(diǎn)講解的是第一部分模板編譯中輸出的render function code

render function code解析

一、模板編譯過(guò)程分解

// 生成ast語(yǔ)法樹(shù)
const ast = parse(template.trim(), options)
// 標(biāo)記靜態(tài)內(nèi)容（以免diff的時(shí)候需要重復(fù)比較）
optimize(ast, options)
// 生成render function code
const code = generate(ast, options)

很遺憾，上訴三步的代碼今天都只是點(diǎn)到為止，不需要太努力，就能在網(wǎng)上搜到相關(guān)解析的文章，如果實(shí)在找不到同時(shí)又感興趣，可以找到vue源碼中的下面文件去讀：

// 編譯入口
src/compiller/index.js
// html解析
src/compiller/parser/html-parser.js
// src/compiller下的其它文件

換一個(gè)姿勢(shì)讀源碼，今天我們要讀的是generate(ast, options)生成的render function code的具體代碼

二、寫一個(gè) vue demo

之前有提到過(guò)，讀源碼需要先了解整體的設(shè)計(jì)思想、架構(gòu)，上面那個(gè)執(zhí)行過(guò)程圖在此列；另外，搭建一個(gè)demo執(zhí)行環(huán)境進(jìn)行debug單步調(diào)試，也是一個(gè)重要手段（特別是你對(duì)源碼的目錄結(jié)構(gòu)不是特別清晰的時(shí)候）。為了讓生成的render function code更為完整，寫一個(gè)覆蓋面盡量廣的 demo :

//template
 <div id="app">
  <p>普通屬性：{{ message }}</p>
  <p>{{msg()}}</p>
  <p>{{ct}}</p>
  <input v-model="message">
  <div v-for="item in items">
   {{ item.text }}
  </div>
  <button v-on:click="bindClick">點(diǎn)我抓同偉</button>
 </div>

 // js
 new Vue({
  el: '#app',
  data: {
  message: '以vue的名義',
  items: [{
   text: '達(dá)康書記'
  }, {
   text: '育良書記'
  }]
  },
  methods: {
  bindClick: function() {
   this.message = '這就抓同偉去';
  },
  msg: function() {
   return this.message + "這個(gè)方法每次都會(huì)執(zhí)行";
  }
  },
  computed: {
  ct: function()　{
   return this.message + "計(jì)算屬性并不會(huì)每次都執(zhí)行";
  }
  }
 })

render function code 解析

debug 拿到生成的 render function code（當(dāng)然也可以通過(guò) webpack 的 vue-loader 編譯之后的 dist 文件拿到，此處省略1000字）

with(this) {
 return _c('div', {
  attrs: {
   "id": "app"
  }
 },
 [_c('p', [_v("普通屬性：" + _s(message))]), _v(" "), _c('p', [_v(_s(msg()))]), _v(" "), _c('p', [_v(_s(ct))]), _v(" "), _c('input', {
  directives: [{
   name: "model",
   rawName: "v-model",
   value: (message),
   expression: "message"
  }],
  domProps: {
   "value": (message)
  },
  on: {
   "input": function($event) {
    if ($event.target.composing) return;
    message = $event.target.value
   }
  }
 }), _v(" "), _l((items),
 function(item) {
  return _c('div', [_v("\n\t\t " + _s(item.text) + "\n\t ")])
 }), _v(" "), _c('button', {
  on: {
   "click": bindClick
  }
 },
 [_v("點(diǎn)我出奇跡抓同偉")])], 2)
}

甭看這段代碼有點(diǎn)怪，但是如果告訴你，這段代碼，注入 data 執(zhí)行，生成的就是傳得玄乎其玄的虛擬 dom 樹(shù)，然后再來(lái)一本正經(jīng)的解（cai）讀(ce)一下，你又會(huì)覺(jué)得這段代碼其實(shí)沒(méi)有這么晦澀難懂。ok，結(jié)合 demo
來(lái)看看，模板相關(guān)指令都被解析成什么了：

1） {{messge}} 解析成了 _s(message) ，果斷認(rèn)為這個(gè) _s 就是 toString

2） {{msg()}} method 解析成了 _s(msg()) ，可見(jiàn)每一次 render, msg 方法都會(huì)被執(zhí)行一遍（即使最終沒(méi)有被反應(yīng)到真實(shí) dom 上），這就是計(jì)算屬性存在的意義

3） {{ct}} 計(jì)算屬性依然被解析成了 _s(ct) ，雖然計(jì)算屬性可以稱之為屬性，但是形式上畢竟還是方法，是不是覺(jué)得比較奇怪？其實(shí) watcher 除了監(jiān)聽(tīng)組件，還會(huì)監(jiān)聽(tīng)計(jì)算屬性依賴的屬性，一旦屬性發(fā)生變更，就會(huì)執(zhí)行計(jì)算屬性方法，并將執(zhí)行結(jié)果賦值給實(shí)例作用域下與計(jì)算屬性方法名相同的屬性，這就是直接使用 _s(ct) 而不是 _s(ct()) 就能正確引用計(jì)算屬性值的原因，計(jì)算屬性快就快在了這里

4） v-for="item in items" 被解析成了

 _l((items),
 function(item) {
  return _c('div', [_v("\n\t\t " + _s(item.text) + "\n\t ")])
 })

可見(jiàn) _l 跟 for-each 很類似

5) 至于 v-on:click 則解析成了

_c('button', {
  on: {
   "click": bindClick
  }
 }

6) 再來(lái)看看 _c, c->create->createNode, 假設(shè)這個(gè)方法就是創(chuàng)建虛擬節(jié)點(diǎn)，回頭看上述代碼，是不是挺有道理，_c 創(chuàng)建根節(jié)點(diǎn)，傳入的子節(jié)點(diǎn)同樣需要這個(gè)方法創(chuàng)建。找找源碼驗(yàn)證下 src/core/vdom/vnode.js，以下中文注釋是我加的

constructor (
 tag?: string, //標(biāo)簽名
 data?: VNodeData, //屬性數(shù)據(jù)，事件監(jiān)聽(tīng)等
 children?: ?Array<VNode>, //子節(jié)點(diǎn)
 text?: string,
 elm?: Node,
 context?: Component,
 componentOptions?: VNodeComponentOptions
 ) {
 ...
 }

以上是“vue中render function code有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：vue中renderfunctioncode有什么用
新聞來(lái)源：http://muchs.cn/article48/pdjehp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站收錄、定制開(kāi)發(fā)、外貿(mào)建站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容