Vue源码学习-初始化、更新流程分析

站长

2022年09月08日 23:59 · 阅读数 30

本篇文章通过一个栗子🌰来聊聊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里收集依赖，如下图。 Vue源码学习-初始化、更新流程分析

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
  );
 };

最后在 _update 方法中，进行 patch 操作，patch 里的具体逻辑就不在这里说了，有兴趣的小伙伴可以去看看我的另一篇文章《Vue源码学习-虚拟DOM+Diff算法》。

结尾

我是周小羊，一个前端萌新，写文章是为了记录自己日常工作遇到的问题和学习的内容，提升自己，如果您觉得本文对你有用的话，麻烦点个赞鼓励一下哟~