Vue源码学习(二）$mount() 后的做的事(1)

　　Vue实例初始化完成后，启动加载（$mount）模块数据。

（一）Vue$3.protype.$mount

　　    

　       标红的函数 compileToFunctions 过于复杂，主要是生AST 树，返回的 ref 如下：

　　    

 

          render 是浏览器虚拟机编译出来的一个函数。我们点进入可以看到如下代码（自己调整后空格换行后的数据）　   

(function(){
   with(this){
    return _c('div',{
    attrs:{"id":"app"}},
    [_c('input',{directives:[{name:"model",rawName:"v-model",value:(message),expression:"message"}],
    attrs:{"type":"text"},domProps:{"value":(message)},
    on:{"input":function($event){
      if($event.target.composing)return;message=$event.target.value}}}),
      _v(_s(message)+"\n")])
   }
})

　　跳过这个复杂的函数。

　　这里作者涉及的很奇妙，因为 mount.call(this, el, hydrating)  中的 mount 定义如下 

　　var mount = Vue$3.prototype.$mount;

 Vue$3.prototype.$mount = function (el, hydrating) {
        el = el && inBrowser ? query(el) : undefined;
        return mountComponent(this, el, hydrating) //vm._watcher 赋值
    };

　　后来又重写了$mount 方法：

　　Vue$3.prototype.$mount = function (el, hydrating) {   }

(二）mountComponent () 函数

         组件安装

function mountComponent(vm, el, hydrating) {
        vm.$el = el; 
        if (!vm.$options.render) {
            //如果不存咋，则创建一个空的虚拟节点
            vm.$options.render = createEmptyVNode;
        }
        callHook(vm, 'beforeMount');

        var updateComponent;
        if ("development" !== 'production' && config.performance && mark) {
            //此处另一种 updateComponent = 。。。。
        } else {
            updateComponent = function () {
                vm._update(vm._render(), hydrating); //渲染DOM
            };
        }
        //noop 空函数，
        vm._watcher = new Watcher(vm, updateComponent, noop); //生成中间件 _watcher
        hydrating = false;

        // $vnode不存在，，则手动安装实例，自启动
        // mounted is called for render-created child components in its inserted hook
        if (vm.$vnode == null) {
            vm._isMounted = true;
            callHook(vm, 'mounted');
        }
        return vm //调用 实例加载钩子函数，返回vue实例
    }

　 Watcher是一个十分复杂的对象，是沟通 Observer与 Compile 的桥梁作用。

 （3）Watcher对象

     1、构造函数

　  Watcher的构造函数并不复杂，主要是为当前Watcher 初始化各种属性，比如depIds,newDeps,getter 等，

　　最后调用 Watcher.prototype.get()，让Dep收集此Wather实例。

　  

　 Watcher构造函数会将 传入的第二个参数转换 this.getter 属性；

　 由于 this.lazy=false,会立即进入 Watcher.prototype.get()。

    2、Watcher.prototype.get()

　 绕了一大圈，这个函数其实也就调用了 传入构造函数的第二个参数。

Watcher.prototype.get = function get() {
        pushTarget(this);
        var value;
        var vm = this.vm;
        try {
            //初始化时 最终 调用我们传入的 updateComponent
            // vm._update(vm._render(), hydrating)
            value = this.getter.call(vm, vm);
        } catch (e) {
        } finally {
            if (this.deep) {
                traverse(value);
            }
            popTarget();
            this.cleanupDeps();
        }
        return value
    };

  此时 this.getter = vm._update(vm._render(), hydrating);  开始渲染渲染DOM，这里十分重要。

  先 执行 Vue.prototype._render()，代码如下

　

 这里 render 便是生成的AST代码。

 接下来会按照 如下顺序 触发各种函数：

 代理函数 proxyGetter() ==>  reactiveGetter() => 执行 render里面的函数 _c ;

 执行完后，将创建的vnode直接返回。

 让我们再仔细看看 defineReactive$$1() 函数，为元素自定义get/set方法。

 function defineReactive$$1(obj, key, val, customSetter, shallow) {
        var dep = new Dep();//依赖管理
        /* 此时obj 是带有__ob__属性的对象，key是msg  */
        var property = Object.getOwnPropertyDescriptor(obj, key);//返回键描述信息
        if (property && property.configurable === false) {
            //不可以修改直接返回
            return
        }

        var getter = property && property.get;
        var setter = property && property.set;

        var childOb = !shallow && observe(val);
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get: function reactiveGetter() {
                var value = getter ? getter.call(obj) : val;
                if (Dep.target) {
                    dep.depend();
                    if (childOb) {
                        childOb.dep.depend();
                        if (Array.isArray(value)) {
                            dependArray(value);
                        }
                    }
                }
                return value
            },
            set: function reactiveSetter(newVal) {
                var value = getter ? getter.call(obj) : val; //获取当前值，是前一个值
                if (newVal === value || (newVal !== newVal && value !== value)) {
                    //值没有发生变化，不再做任何处理
                    return
                }
                /* eslint-enable no-self-compare */
                if ("development" !== 'production' && customSetter) {
                    customSetter();
                }
                if (setter) {
                    setter.call(obj, newVal);//调用默认setter方法或将新值赋给当前值
                } else {
                    val = newVal;
                }
                childOb = !shallow && observe(newVal);
                dep.notify();//赋值后通知依赖变化
            }
        });
    }

 说的不太清楚，下篇文章继续说。