【Vue原理】テンプレートからDOMまでの簡単な流れ

文章を書くのは容易ではない,ほめてくれないか.
Vueソースの共有に専念し、文章は白話版とソース版に分けられ、白話版は仕事の原理を理解し、ソース版は内部の詳細を理解するのに役立ち、一緒に勉強しましょう.
研究はVueバージョンに基づいて
【2.5.17】
レイアウトが悪いと思ったら、下のリンクをクリックするか、下に引いて公衆番号に注目してもいいでしょう.
【Vue原理】テンプレートからDOMまでの簡単な流れ
今日の計画では、Vueテンプレートがページにマウントされるのはどのような流れなのか、内容は通常のHTMLラベルのテンプレートマウントを指し、この部分が重要です.
この部分もComponentをクッションとして説明するためで、最後までComponentは必ず正常なラベルとして載せているので、まずこの部分を引き出して話します.
まず、この流れは、個人的にはinitとmountの2つの大部分に分けることができると思います.
名前の通り、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のみで作成されるのではなく、componentなどのVue内部で作成される可能性があります.
だから、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,すなわち,最終的にマウントDOMを呼び出すには,受信elが必要である.
したがって、すべてのVueインスタンスの新規作成がinitの最後にvm.$を呼び出すわけではありません.mountはDOMをマウントします.例えばcomponentの2つのプロセスは別々です.
まず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   ，              ......       ，      

その中で1つの関数に関連して、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);
        }
    }
}

まとめ
2つのプロセスは次のとおりです.
init
1、初期化オプション
2、初期化例
mount
1、解析テンプレート、レンダリング関数の生成と保存
2、watcherを新規作成し、更新関数vmを直ちに実行する.update(vm._render)
3、vm._renderはレンダリング関数を呼び出してVNodeを生成しvm._に渡すupdate
4、vm.を呼び出すupdate,VNodeよりDOMを生成してマウントする