刺破 vue 的心臟之——詳解 render function code

vue在使用上入門並無什麼過高的門檻，但前端同窗們也不應僅僅停留在使用上。以 vue 設計、編碼之優秀，足當抽絲剝繭，扒開它的外殼，深刻其原理。讓咱們一塊兒來刺破 vue 的心臟

vue核心執行過程圖

vue核心的執行過程主要分爲這幾個階段：
1） 編譯模板，生成可複用的render function code(這是今天要重點解讀的)，這一步在vue實例的整個生命週期中只會執行一次甚至零次，由於咱們能夠在打包的時候能夠預編譯

2） 生成watcher等核心渲染監聽，在整個vue實例的生命過程當中持續發生着做用，對view和modal進行雙向綁定

3） 虛擬dom的diff比較，當watcher監聽到data的變動的時候，就會根據注入新的data執行render function code，生成新的虛擬dom，跟老的虛擬dom（第一次執行的時候可能爲空）進行diff比對，不一樣的部分將寫入真實的dom

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

render function code解析

1、模板編譯過程分解

// 生成ast語法樹
const ast = parse(template.trim(), options)
// 標記靜態內容（以避免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的具體代碼

2、寫一個 vue demo

以前有提到過，讀源碼須要先了解總體的設計思想、架構，上面那個執行過程圖在此列；另外，搭建一個demo執行環境進行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 + "這個方法每次都會執行";
        }
      },
      computed: {
        ct: function()　{
            return this.message + "計算屬性並不會每次都執行";
        }
      }
    })複製代碼

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 執行，生成的就是傳得玄乎其玄的虛擬 dom 樹，而後再來一本正經的解（cai）讀(ce)一下，你又會以爲這段代碼其實沒有這麼晦澀難懂。ok，結合 demo
來看看，模板相關指令都被解析成什麼了：

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

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

3）{{ct}} 計算屬性依然被解析成了 _s(ct)，雖然計算屬性能夠稱之爲屬性，可是形式上畢竟仍是方法，是否是以爲比較奇怪？其實 watcher 除了監聽組件，還會監聽計算屬性依賴的屬性，一旦屬性發生變動，就會執行計算屬性方法，並將執行結果賦值給實例做用域下與計算屬性方法名相同的屬性，這就是直接使用 _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, 假設這個方法就是建立虛擬節點，回頭看上述代碼，是否是挺有道理，_c 建立根節點，傳入的子節點一樣須要這個方法建立。找找源碼驗證下 src/core/vdom/vnode.js，如下中文註釋是我加的

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

至此，也算是自圓其說了

公衆號：菲麥前端