【Vue原理】從模板到DOM的簡要流程

wenzi 發布于2019-08-23 18:32 / 2937人閱讀

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理從模板到的簡要流程今天的計劃是，

寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧
研究基于 Vue版本 【2.5.17】

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

【Vue原理】從模板到DOM的簡要流程

今天的計劃是，探索Vue模板掛載到頁面是怎么樣的一個流程，內容是指正常 HTML 標簽的模板掛載，這部分內容很重要。

而這部分內容也是為了講解 Component 作為鋪墊，因為到最后 Component 必然也是作為一個正常標簽去掛載，所以先把這部分抽出來講

首先，這個流程，個人認為可以分為兩大部分，分別是 init 和 mount

顧名思義，init 必定是和初始化有關，mount 和掛載DOM 有關

Init

首先，當你開始調用 Vue 的時候，比如這樣

// js

new Vue({    

    el: document.getElementsByTagName("div")[0],

})


// html，夠簡潔了吧

那么，先進入的肯定是 Vue 這個構造函數，呈上來！

function Vue(options) {    

    this._init(options);

}

Vue.prototype._init = function(options) {    

    // 初始化 選項，computed，data 之類的

    // 初始化實例，給實例綁定些方法
    // 觸發 beforeCreated，created 鉤子

}

這個 _init 方法，是構建Vue 實例的時候調用的，而創建Vue 實例，并非只有通過 new Vue 創建，有可能是 Vue 內部創建的，比如 component

所以，才需要提取出一個 init 方法

然后，init 到這里就結束了，下面就到了另一個流程 mount

Mount

init 結束，就開始解析模板啦，生成DOM 啦，掛載DOM 啦之類的

開始正文，首先，從什么時候開始？此時需要亮出 _init 方法，沒錯，就是上面出現的方法

其實在這個方法的最后，有一個調用執行掛載DOM 的方法，如下

Vue.prototype._init = function(options) {
    .....
    if (vm.$options.el) {
        vm.$mount(vm.$options.el);
    }
}

可以看到一句代碼，vm.$mount ，沒錯，就在這里開啟了 DOM 掛載的里程碑

但是，等等，有限制條件 vm.$options.el，也就是，必須有傳入 el 才會在最后調用掛載DOM

所以，并不是所有的 Vue 實例新建都會在 init 結尾調用 vm.$mount 去掛載DOM，比如 component 兩個過程就是分開的

我們還是先來看看 vm.$mount 吧

Vue.prototype.$mount = function(el) {    

    return mountComponent(this, query(el))

};

var mount = Vue.prototype.$mount;

Vue.prototype.$mount = function(el) {

    ...解析模板，生成模板渲染函數，保存渲染函數到 options    

    return mount.call(this, el)

}

原樣呈現了，Vue 中有兩個 $mount 函數，第一個的作用是給第二個 調用......如果大家看源碼，不要搞混了喂

其中涉及到一個函數，mountComponent，速看

function mountComponent(vm, el) {    

    new Watcher(vm, function() {
        vm._update(vm._render()
    })    
    return v
}

function Watcher(vm, expOrFn) {    

    this.getter = expOrFn;    

    this.get();

}

Watcher.prototype.get = function() {
    value = this.getter(vm);
}

上面代碼的作用可以說是，為 Vue 實例新建監聽者 watcher，并設置一個更新函數

而這個更新函數，會在新建 watcher后馬上執行，就是馬上執行了一遍這行代碼

vm._update(vm._render())

1、vm._render

這個函數的作用是，執行之前解析得到的【渲染函數】，渲染函數執行完會返回一個模板對應的【VNode】

vm._render 再把這個 vnode 返回

于是就把這個 vnode，傳給了 vm._update 中當做了第一個參數

render 函數的內容其實非常的多，但是這里一筆帶過，只用知道是用來生成Vnode 就好了，具體的內容會有具體的文章講解

Vue.prototype._render = function() {
    vnode = render();    

    return vnode
}

2、vm._update

這個函數的作用是，對比 vnode，掛載更新DOM

1、如果存在舊 vnode，那么會對比舊 vnode 和剛傳入的新 vnode，不斷地 patch 得到最小變化單位，從而只更新這部分DOM

2、如果不存在舊 vnode，那么就直接把 vnode 轉換為 dom 掛載到頁面

其中，生成DOM 和掛載DOM 用到的方法是 createElm

方法很簡單，無非就是通過標簽名創建DOM，然后插入到頁面中

function createElm(vnode, parentElm, refElm) {  

    var children = vnode.children;    

    var tag = vnode.tag;

    vnode.elm = document.createElement(tag);   


    // 不斷遞歸遍歷子節點

    createChildren(vnode, children);    

    // 插入DOM 節點

    insert(parentElm, vnode.elm, refElm);
}

function createChildren(vnode, children) {    

    if (Array.isArray(children)) {        

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

            createElm(children[i], vnode.elm, null);
        }
    }
}

function insert(parent, elm, ref) { 

    if (parent) {   

        // 如果存在兄弟節點，就查到兄弟前面

        if (ref) {       

            // 兄弟節點的父節點和 本節點父節點相同

            if (ref.parentNode === parent) {

                parent.insertBefore(elm, ref);
            }
        } 

        // 如果沒有兄弟節點，就直接查到父節點最后
        else {
            parent.appendChild(elm);
        }
    }
}

總結

兩個過程如下

init

1、初始化選項

2、初始化實例

mount

1、解析模板，生成并保存渲染函數

2、新建 watcher 并立即執行更新函數 vm._update(vm._render)

3、vm._render 調用渲染函數生成 VNode，傳給 vm._update

4、調用 vm._update，根據 VNode 生成 DOM 并掛載

GPU云服務器云服務器從云端服務器加載的原理 tomcat插件原理流程 php 模板繼承原理 vue上傳到云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105403.html

【Vue原理】Component - 源碼版之掛載組件DOM

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之掛載組件由這篇文章從模寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

lbool 2019-08-23 18:34 評論0 收藏0
【Vue原理】Component - 白話版

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理白話版從模板上使用到掛載到頁面寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

liuyix 2019-08-23 18:32 評論0 收藏0
【Vue原理】Event - 源碼版之綁定標簽DOM事件

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定標簽事件這里的綁定寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

phoenixsky 2019-08-23 18:35 評論0 收藏0
【Vue原理】Compile - 源碼版之從新建實例到 compile結束的主要流程

摘要：頁面這個實例，按理就需要解析兩次，但是有緩存之后就不會理清思路也就是說，其實內核就是不過是經過了兩波包裝的第一波包裝在中的內部函數中內部函數的作用是合并公共和自定義，但是相關代碼已經省略，另一個就是執行第二波包裝在中，目的是進行緩存寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 ...

CODING 2019-08-26 10:40 評論0 收藏0
【Vue原理】VNode - 源碼版

摘要：表示虛擬節點，為什么叫虛擬節點呢，因為不是真的節點。因為是對象，不管還是瀏覽器，都可以統一操作，從而獲得了服務端渲染原生渲染手寫渲染函數等能力減少操作。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下...

layman 2019-08-23 18:32 評論0 收藏0