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$.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$$(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();//赋值后通知依赖变化
             }
         });
     }

defineReactive$$1

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