关于javascript:Vue源码学习初始化更新流程分析

2次阅读

共计 4270 个字符，预计需要花费 11 分钟才能阅读完成。

本篇文章通过一个栗子🌰来聊聊 Vue 初始化和更新数据的大抵流程：

<div id="demo">
    <child :list="list"></child>
    <button @click="handleAdd">add</button>
</div>
<script>
    Vue.component('child', {
        props: {
            list: {
                type: Array,
                default: () => []
            }
        },
        template: '<p>{{list}}</p>'
    })

    new Vue({
        el: "#demo",
        data() {
          return {list: [1,2]
          }
        },
        methods: {handleAdd() {this.list.push(Math.random())
            }
        }
    })
</script>

很简略的例子，一个父组件一个子组件，子组件承受一个 list，父组件有个按钮，能够往 list 里 push 数据扭转 list。

首先从 new Vue({el: "#app"}) 开始，会执行 _init 办法。

function Vue (options) {
   // 省略...
   this._init(options)
}

_init 办法的最初执行了 vm.$mount 挂载实例。

Vue.prototype._init = function (options) {
   var vm = this;
   // 省略...
   if (vm.$options.el) {vm.$mount(vm.$options.el);
   }
}

如果此时运行的版本是 runtime with compiler 版本，这个版本的 $mount 会被进行重写，减少了把 template 模板转成 render 渲染函数的操作，但最终都会走到 mountComponent 办法。

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

var mount = Vue.prototype.$mount; // 缓存上一次的 Vue.prototype.$mount

Vue.prototype.$mount = function (el, hydrating) { // 重写 Vue.prototype.$mount
     // 省略，将 template 转化为 render 渲染函数
     return mount.call(
       this,
       el,
       hydrating
     )
};

mountComponent 里触发了 beforeMount 和 mounted 生命周期，更重要的是创立了 Watcher，传入的 updateComponent 就是 Watcher 的 getter。

function mountComponent(vm, el, hydrating) {
     // 执行生命周期函数 beforeMount
     callHook(vm, 'beforeMount');

     var updateComponent;
     // 如果开发环境
     if ("development" !== 'production' && config.performance && mark) {// 省略...} else {updateComponent = function () {
             vm._update(vm._render(), // 先执行_render, 返回 vnode
                 hydrating
             );
         };
     }

     new Watcher(
         vm,
         updateComponent,
         noop,
         null,
         true // 是否渲染过得观察者
     );
    
     if (vm.$vnode == null) {
         vm._isMounted = true;
         // 执行生命周期函数 mounted
         callHook(vm, 'mounted');
     }
     return vm
 }

在创立 Watcher 时会触发 get() 办法，pushTarget(this) 将 Dep.target 设置为以后 Watcher 实例。

function Watcher(vm, expOrFn, cb, options, isRenderWatcher) {if (typeof expOrFn === 'function') {this.getter = expOrFn;}
   this.value = this.lazy ?  // 这个有是组件才为真
       undefined :
       this.get(); // 计算 getter，并从新收集依赖项。获取值};

 Watcher.prototype.get = function get() {pushTarget(this);
     var value;
     var vm = this.vm;
     try {value = this.getter.call(vm, vm);
     } catch (e) { } finally {popTarget();
     }
     return value
 };

Watcher 的 get() 里会去读取数据，触发 initData 时应用 Object.defineProperty 为数据设置的 get，在这里进行依赖收集。咱们晓得 Vue 中每个响应式属性都有一个 __ob__ 属性，寄存的是一个 Observe 实例，这里的 childOb 就是这个 __ob__，通过 childOb.dep.depend() 往这个属性的 __ob__ 中的 dep 里收集依赖，如下图。

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: Function
) {
  /* 在闭包中定义一个 dep 对象 */
  const dep = new Dep()

  let childOb = observe(val)
  Object.defineProperty(obj, key, {
   enumerable: true,
   configurable: true,
   get: function reactiveGetter () {
     /* 如果本来对象领有 getter 办法则执行 */
     const 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) {}})
}

在咱们的例子中，这个 list 会收集两次依赖，所以它 __ob__ 的 subs 里会有 两个 Watcher，第一次是在父组件 data 中的 list，第二次是在创立组件时调用 createComponent，而后又会走到 _init => initState => initProps，在 initProps 内对 props 传入的属性进行依赖收集。有两个 Watcher 就阐明 list 扭转时要告诉两个中央，这很好了解。
.
最初，触发 getter，下面说过 getter 就是 updateComponent，外面执行 _update 更新视图。

点击按钮往数组中增加一个数字，在 Vue 中，为了监听数组变动，对数组的罕用办法做了重写，所以先会走到 ob.dep.notify() 这里，ob 就是 list 的 __ob__ 属性，下面保留着 Observe 实例，外面的 dep 中有两个 Watcher，调用 notify 去告诉所有 Watcher 对象更新视图。

[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
.forEach(function (method) {const original = arrayProto[method]
 def(arrayMethods, method, function mutator () {
   let i = arguments.length
   const args = new Array(i)
   while (i--) {args[i] = arguments[i]
   }
   /* 调用原生的数组办法 */
   const result = original.apply(this, args)

   const ob = this.__ob__
   let inserted
   switch (method) {
     case 'push':
       inserted = args
       break
     case 'unshift':
       inserted = args
       break
     case 'splice':
       inserted = args.slice(2)
       break
   }
   if (inserted) ob.observeArray(inserted)

   /*dep 告诉所有注册的观察者进行响应式解决 */
   ob.dep.notify()
   return result
 })
})

notify 办法里去告诉所有 Watcher 更新，执行 Watcher 的 update 办法，update 里的 queueWatcher 过滤了一些反复的 Watcher, 但最终会走到 Watcher 的 run() 办法。

Dep.prototype.notify = function notify() {var subs = this.subs.slice();
   for (var i = 0, l = subs.length; i < l; i++) {subs[i].update();}
};

Watcher.prototype.update = function update() {if (this.lazy) {this.dirty = true;} else if (this.sync) {this.run();
 } else {queueWatcher(this);
 }
};

run 办法里会调用 get(), get 办法里回去触发 Watcher 的 getter，下面说过，getter 就是 updateComponent。

Watcher.prototype.run = function run() {if (this.active) {
 /* get 操作在获取 value 自身也会执行 getter 从而调用 update 更新视图 */
 const value = this.get()}
}

updateComponent = function () {
  vm._update(vm._render(),
      hydrating
  );
 };