寫文章不容易，點個讚唄兄弟

專注 Vue 原始碼分享，文章分為白話版和 原始碼版，白話版助於理解工作原理，原始碼版助於瞭解內部詳情，讓我們一起學習吧

研究基於 Vue版本 【2.5.17】

如果你覺得排版難看，請點選 下面連結 或者 拉到 下面關注公眾號也可以吧

【Vue原理】Render - 原始碼版 之 靜態 Render

上一篇我們講了 render 函式，而 Vue 為了更新時速度快一些，加入了一個 staticRender

沒錯，就是 靜態 render，看過前面文章的人，應該知道什麼是 靜態 render

靜態 render 就是用於渲染哪些不會變化的節點

大家可以先看看，Vue 是怎麼判斷某個節點是否是靜態節點

Compile 之 optimize 標記靜態節點

好，下面開始我們的正文，想了想，我們還是以幾個問題開始吧

1、靜態 render 是什麼樣子的

2、靜態 render 是怎麼生成和 儲存

3、靜態 render 怎麼執行

---

什麼是 靜態Render

靜態 render 其實跟 render 是一樣的，都是執行得到 Vnode

只是靜態 render，沒有繫結動態資料而已，也就是說不會變化

比如說，一個簡單 render 是這樣的

綁定了動態資料，需要從例項去獲取

_c('div',[_v(_s(aa))])

而靜態 render 是這樣的

沒有動態資料，這個靜態render 的執行結果是永遠不會變的

_c('div',[_c('span',[_v("1")])])

---

生成儲存靜態Render

靜態 render 是在 generate 階段生成的，生成的方式和 render 是一樣的

比如在一個模板中，有很多個靜態 根節點，像這樣

首先，Vue 會在遍歷模板的時候，發現 span 和 strong 本身以及其子節點都是靜態的

那麼就會給 span 和 strong 節點本身設定一個屬性 staticRoot，表示他們是靜態根節點

然後這兩個靜態根節點就會生成自己專屬的 靜態 render

如何標記靜態根節點的具體可以看 Compile 之 optimize 標記靜態節點

怎麼把靜態根節點生成 render 的可以看 Compile 之 generate 節點拼接 中 genStatic 的部分

如果你有一直看我的Vue 筆記的話，你應該這裡是會有點印象的

之後

靜態 render 生成之後是需要儲存的，那麼儲存在哪裡呢？

儲存在一個數組中，名叫 staticRenderFns，就是直接push 進去

當然了，此時的 push 進去的 靜態 render 還是字串，並沒有變成函式

以上面的模板為例，這裡的 staticRenderFns 就是這樣，包含了兩個字串

staticRenderFns  = [
    "_c('span',[_c('b',[_v("1")])])",    

    "_c('strong',[_c('b',[_v("1")])])"

]

但是在後面會逐個遍歷變成可執行的函式

staticRenderFns = staticRenderFns.map(code => {    

    return new Function(code)

});

那麼 這個 staticRenderFns 又是什麼啊？

每個 Vue 例項都有一個獨立的 staticRenderFns，用來儲存例項本身的靜態 render

staticRenderFns 的位置是

vm.$options.staticRenderFns

---

執行靜態Render

靜態 render 需要配合 render 使用，怎麼說

看個例子

這個模板的 render 函式是

_c('div',[ 
    _m(0), 
    _v(_s(a), 
    _m(1) 
])

_m(0) , _m(1) 就是執行的就是 靜態 render 函式，然後返回 Vnode

於是 render 也可以完成 vnode 樹的構建了

那麼 _m 是什麼呢？

在 Vue 初始化時，給Vue的原型便註冊了這個函式，也就是說每個例項都繼承到 _m

function installRenderHelpers(target) {
    target._m = renderStatic;
}



installRenderHelpers(Vue.prototype);

再來看 renderStatic

function renderStatic(index) {    



    var cached = this._staticTrees || (this._staticTrees = []);    

    var tree = cached[index];  

     

    // 如果快取存在，就直接返回
    if (tree) return tree    



    // 這裡是執行 render 的地方

    tree = cached[index] =

        this.$options.staticRenderFns[index].call(

            this, null, this 

        );

   

    // 只是標記靜態 和 節點id 而已
    markStatic(tree, "__static__" + index, false);    



    return tree

}

這個函式做的事情可以分為幾件

1、執行靜態render

2、快取靜態render 結果

3、標記 靜態 render 執行得到的 Vnode

我們來一個個說

1 執行靜態render

上面我們說過了，靜態render 儲存在 陣列 staticRenderFns

所以這個函式接收一個索引值，表示要執行陣列內哪個靜態render

取出靜態render 後，執行並繫結 Vue 例項為上下文物件

然後得到 Vnode

2 快取靜態render 結果

這一步就是要把上一步得到的 Vnode 快取起來

那麼快取在哪裡呢？

_staticTrees

這是一個數組，每個例項都會有一個獨立的 _staticTrees，用來存在自身的靜態 render 執行得到的 Vnode

看一下上個模板中例項儲存的 _staticTrees

3 標記 靜態 render 執行得到的 Vnode

我們已經執行靜態render得到了 Vnode，這一步目的是標記

標記什麼呢

1、新增標誌位 isStatic

2、新增 Vnode 唯一id

renderStatic 中我們看到標記的時候，呼叫了 markStatic 方法，現在就來看看

function markStatic(
    tree, key

) {    



    if (Array.isArray(tree)) {        



        for (var i = 0; i < tree.length; i++) {            



            if ( tree[i] && typeof tree[i] !== 'string') {                



                var node  = tree[i]


                node.isStatic = true;
                node.key = key + "_" + i;
            }
        }
    }
    else {

        tree.isStatic = true;
        tree.key = key
    }
}

為什麼新增標誌位 isStatic？

前面我們新增的所有靜態標誌位都是針對 模板生成的 ast

這裡我們是給 Vnode 新增 isStatic，這才能完成Vue的目的

Vue 目的就是效能優化，在頁面改變時，能儘量少的更新節點

於是在頁面變化時，當 Vue 檢測到該 Vnode.isStatic = true，便不會比較這部分內容

從而減少比對時間

Vnode 唯一id

每個靜態根Vnode 都會存在的一個屬性

我也沒想到 靜態Vnode 的 key 有什麼作用，畢竟不需要比較，也許是易於區分？？

最後

靜態 render 我們就講完了，是不是很簡單，在沒看原始碼之前，我以為很難

現在看完，發現也簡單的，不過我也是看了幾個月的。。。。

鑑於本人能力有限，難免會有疏漏錯誤的地方，請大家多多包涵，如果有任何描述不當的地方，歡迎後臺聯絡本人，有重謝

相關推薦