Vue.js 技术揭秘学习 （2） Vue 实例挂载的实现

Vue 中我们是通过 $mount 实例方法去挂载 vm 的

$mount 方法实际上会去调用 mountComponent 方法,mountComponent 核心就是先实例化一个渲染Watcher，在它的回调函数中会调用 updateComponent 方法，在此方法中调用 vm._render 方法先生成虚拟 Node，最终调用 vm._update更新 DOM。

 

先实例化一个渲染Watcher，在它的回调函数中会调用 updateComponent 方法

new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)

new Watcher  实例化渲染 Watcher

 callHook(vm, 'beforeUpdate')   回调 updateComponent 方法

updateComponent 方法：

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

 

updateComponent 方法 里面先调用  render  方法