刺破 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解析

一、模板編譯過程分解

// 生成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的具體程式碼

二、寫一個 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
  ) {
    ...
  }複製程式碼

至此，也算是自圓其說了