摘要：原型方法通過原型方法方法來掛載實(shí)例。當(dāng)響應(yīng)式屬性發(fā)生變化時(shí)，會(huì)通知依賴列表中的對(duì)象進(jìn)行更新。此時(shí)，對(duì)象執(zhí)行方法，重新渲染節(jié)點(diǎn)。在執(zhí)行過程中，如果需要讀取響應(yīng)式屬性，則會(huì)觸發(fā)響應(yīng)式屬性的?？偨Y(jié)響應(yīng)式屬性的原理

vue實(shí)例 初始化 完成以后，接下來就要進(jìn)行 掛載。

vue實(shí)例掛載，即為將vue實(shí)例對(duì)應(yīng)的 template模板，渲染成 Dom節(jié)點(diǎn)。

? 通過原型方法 $mount方法 來掛載vue實(shí)例。

? 掛載vue實(shí)例時(shí)，經(jīng)歷一下幾個(gè)重要步驟：

生成render函數(shù);

生成vue實(shí)例的監(jiān)聽器watcher;

執(zhí)行render函數(shù)，將vue實(shí)例的template模板轉(zhuǎn)化為VNode節(jié)點(diǎn)樹;

執(zhí)行update函數(shù)，將VNode節(jié)點(diǎn)樹轉(zhuǎn)化為dom節(jié)點(diǎn)樹;

    // 掛載Vue實(shí)例
    Vue$3.prototype.$mount = function(el, hydrating) {
        // el為dom元素對(duì)應(yīng)的選擇器表達(dá)式，根據(jù)選擇器表達(dá)式，獲取dom元素
        el = el && query(el);

        ...
        
        // this->Vue實(shí)例，或者是組件實(shí)例對(duì)象
        var options = this.$options;
        
        // 解析模板，將模板轉(zhuǎn)換為render渲染函數(shù)
        if(!options.render) {
            // 一般是組件實(shí)例的構(gòu)造函數(shù)的options中會(huì)直接有template這個(gè)屬性
            var template = options.template;
            if(template) {
                if(typeof template === "string") {
                    if(template.charAt(0) === "#") {
                        template = idToTemplate(template);
                        /* istanbul ignore if */
                        if("development" !== "production" && !template) {
                            warn(
                                ("Template element not found or is empty: " + (options.template)),
                                this
                            );
                        }
                    }
                } else if(template.nodeType) {
                    template = template.innerHTML;
                } else {
                    {
                        warn("invalid template option:" + template, this);
                    }
                    return this
                }
            } else if(el) {
                // 獲取dom節(jié)點(diǎn)的outerHTML
                template = getOuterHTML(el);
            }
            // template，模板字符串
            if(template) {
                /* istanbul ignore if */
                if("development" !== "production" && config.performance && mark) {
                    mark("compile");
                }
                
                // 將html模板字符串編譯為渲染函數(shù)
                var ref = compileToFunctions(template, {
                    // 換行符
                    shouldDecodeNewlines : shouldDecodeNewlines,
                    // 分割符
                    delimiters : options.delimiters,
                    // 注釋
                    comments : options.comments
                }, this);
                // 獲取渲染函數(shù)
                var render = ref.render;
                // 獲取靜態(tài)渲染函數(shù)
                var staticRenderFns = ref.staticRenderFns;
                // 將渲染函數(shù)添加到Vue實(shí)例對(duì)象的配置項(xiàng)options中
                options.render = render;
                // 將靜態(tài)渲染函數(shù)添加到Vue實(shí)例對(duì)象的配置項(xiàng)options中
                options.staticRenderFns = staticRenderFns;

                /* istanbul ignore if */
                if("development" !== "production" && config.performance && mark) {
                    mark("compile end");
                    measure(((this._name) + " compile"), "compile", "compile end");
                }
            }
        }
        return mountComponent.call(this, el, hydrating)
    };
    
    
    // 掛載vue實(shí)例
    function mountComponent(vm, el, hydrating) {
        vm.$el = el;
        
        ...
        
        updateComponent = function() {
            vm._update(vm._render(), hydrating);
        };

        // 給Vue實(shí)例或者是組件實(shí)例創(chuàng)建一個(gè)監(jiān)聽器， 監(jiān)聽updateComponent方法
        vm._watcher = new Watcher(vm, updateComponent, noop);
        
        ...
        
        return vm;
    }

? watcher 對(duì)象在構(gòu)建過程中，會(huì)作為觀察者模式中的 Observer，會(huì)被添加到 響應(yīng)式屬性的dep對(duì)象的依賴列表 中。

? 當(dāng)響應(yīng)式屬性發(fā)生變化時(shí)，會(huì)通知依賴列表中的watcher對(duì)象進(jìn)行更新。

? 此時(shí)，watcher 對(duì)象執(zhí)行 updateComponent 方法，重新渲染 dom節(jié)點(diǎn)。

? 在 掛載vue實(shí)例 時(shí)， 會(huì)為 vue實(shí)例 構(gòu)建一個(gè) 監(jiān)聽者watcher。

 // vm => 當(dāng)前監(jiān)聽者對(duì)應(yīng)的vue實(shí)例
 // expOfFn => 需要監(jiān)聽的表達(dá)式
 // cb => 監(jiān)聽回調(diào)方法
 // options => 選項(xiàng)，比如deep、immediate
 // vm.$watch("message", function(newValue) {...})
 
 var Watcher = function Watcher(vm, expOrFn, cb,  options) {
        this.vm = vm;

        vm._watchers.push(this);
        
        ...
        
        // 監(jiān)聽器訂閱的Dep對(duì)象實(shí)例
        this.deps = [];
        this.newDeps = [];
        // 存儲(chǔ)監(jiān)聽器已經(jīng)訂閱的Dep對(duì)象實(shí)例的id，防止重復(fù)訂閱。
        // 每一個(gè)Dep對(duì)象實(shí)例都有一個(gè)ID
        this.depIds = new _Set();
        this.newDepIds = new _Set();
        
        // 監(jiān)聽器監(jiān)聽的表達(dá)式
        this.expression = expOrFn.toString();
        // 初始化getter，getter用于收集依賴關(guān)系
        if(typeof expOrFn === "function") {
            // expOfFn 為 函數(shù)
            // 對(duì)應(yīng)：給vue實(shí)例建立watcher
            this.getter = expOrFn;
        } else {
            // epOfFn 為 字符串
            // 對(duì)應(yīng)：在vue實(shí)例中建立監(jiān)聽
            // 比如 vm.$watch("message", function() {...})
            this.getter = parsePath(expOrFn);
        }

        this.value = this.lazy
            ? undefined
            : this.get();
    };
    
    // 執(zhí)行watcher的getter方法，用于收集響應(yīng)式屬性dep對(duì)象 和 watcher的依賴關(guān)系
    // 在vue實(shí)例掛載過程中， getter = updateComponent
    Watcher.prototype.get = function get() {
        // 將Dep.target設(shè)置為當(dāng)前Watcher對(duì)象實(shí)例
        pushTarget(this);
        var value;
        var vm = this.vm;
        
        ...
        
        value = this.getter.call(vm, vm);
        
        ...
        
        return value
    };
    
    // watcher 更新
    Watcher.prototype.update = function update() {
        ...
        
        this.get()
        
        ...
    };
    
    // 將watcher添加到dep屬性的依賴列表中
    Watcher.prototype.addDep = function addDep(dep) {
        var id = dep.id;
        if(!this.newDepIds.has(id)) {
            this.newDepIds.add(id);
            this.newDeps.push(dep);
            if(!this.depIds.has(id)) {
                dep.addSub(this);
            }
        }
    };
    

? 在掛載vue實(shí)例時(shí)，watcher對(duì)象會(huì)在構(gòu)建過程中會(huì)執(zhí)行 updateComponent 方法。

? 執(zhí)行 updateComponent 方法分為兩個(gè)過程：

執(zhí)行 render 方法，返回 VNode節(jié)點(diǎn)樹；

執(zhí)行 update 方法，將 VNode節(jié)點(diǎn)樹 渲染為 dom節(jié)點(diǎn)樹。

? 執(zhí)行 render 方法時(shí)，會(huì)觸發(fā)響應(yīng)式屬性的 getter 方法，將 watcher 添加到 dep對(duì)象的依賴列表中。

? render 方法是 vue實(shí)例 在掛載時(shí)由 template 編譯成的一個(gè) 渲染函數(shù)。

tempalte:
    

        {{message}}
    
    
render:
    // 執(zhí)行render， 需要讀取響應(yīng)式屬性message，觸發(fā)message的getter方法
    (function anonymous() {
        with(this){return _c("div",{attrs:{"id":"app"}},[_v(_s(message))])}
    })
    // _s, 將this.message轉(zhuǎn)化為字符串
    // _v, 生成文本節(jié)點(diǎn)對(duì)應(yīng)的VNode
    // _c, 生成"div"元素節(jié)點(diǎn)對(duì)應(yīng)的Vnode

? render 函數(shù)返回 VNode節(jié)點(diǎn) ， 用于 渲染Dom節(jié)點(diǎn)。

? 在執(zhí)行過程中，如果需要讀取 響應(yīng)式屬性，則會(huì)觸發(fā) 響應(yīng)式屬性 的 getter。

? 在 getter 方法中， 將 watcher 對(duì)象添加到 響應(yīng)式屬性dep對(duì)象的依賴列表 中。

? 修改 響應(yīng)式屬性時(shí)，會(huì)觸發(fā)響應(yīng)式屬性的 setter 方法。此時(shí)，響應(yīng)式屬性的 dep對(duì)象執(zhí)行 notify 方法，遍歷自己的 依賴列表subs， 逐個(gè)通知subs中的 watcher 去更新。

? watcher 對(duì)象執(zhí)行 update 方法，重新調(diào)用 render 方法生成 Vnode節(jié)點(diǎn)樹，然后 對(duì)比新舊Vnode節(jié)點(diǎn)樹 的不同，更新dom樹。

? 響應(yīng)式屬性 的原理: