前言

最近在深入的學習研究vue，其實vue在使用上入門并沒有什么太高的門檻，但前端同學們也不該僅僅停留在使用上。以 vue 設計、編碼之優(yōu)秀，足當抽絲剝繭，扒開它的外殼，深入其原理。讓我們一起來刺破 vue 的心臟，下面話不多說了，來一起看看詳細的介紹吧。

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

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

      1） 編譯模板，生成可復用的render function code(這是今天要重點解讀的)，這一步在vue實例的整個生命周期中只會執(zhí)行一次甚至零次，因為我們可以在打包的時候可以預編譯

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

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

這幾個過程都會以源碼解析的方式分篇解讀，今天我們重點講解的是第一部分模板編譯中輸出的render function code

render function code解析

一、模板編譯過程分解

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

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

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

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

二、寫一個 vue demo

之前有提到過，讀源碼需要先了解整體的設計思想、架構，上面那個執(zhí)行過程圖在此列；另外，搭建一個demo執(zhí)行環(huán)境進行debug單步調試，也是一個重要手段（特別是你對源碼的目錄結構不是特別清晰的時候）。為了讓生成的render function code更為完整，寫一個覆蓋面盡量廣的 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">點我抓同偉</button>
 </div>

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

render function code 解析

debug 拿到生成的 render function code（當然也可以通過 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("點我出奇跡抓同偉")])], 2)
}

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

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

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

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

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

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

可見 _l 跟 for-each 很類似

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

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

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

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

至此，也算是自圓其說了

總結

以上就是這篇文章的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論