学习目标

$mount方法具体实现

入口文件

1.src\platforms\web\entry-runtime-with-compiler.js

这个文件对$mount方法进行了扩展，所以从该文件开始

• 文件主要功能：扩展$mount方法，解析option的render template el的处理方法
• 核心方法：compileToFunctions

compileToFunctions 该方法根据模板获取对应的render函数

2.src\platforms\web\runtime\index.js

• 文件主要功能：$mount方法初始化的地方
• 核心方法：mountComponent

3.src\core\instance\lifecycle.js

• 文件主要功能：mountComponent方法初始化的地方

核心方法 mountComponent

首先要明白这个方法具体做了些什么

function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
){
   vm.$el = el
   ......
   callHook(vm, 'beforeMount')
   ......
   let updateComponent;
   updateComponent = () => {
         let re = vm._render();
         vm._update(re, hydrating)
   }
   
   new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  ......
  callHook(vm, 'mounted')
}

以上为该方法的核心代码。

1.el对象挂载

代码：vm.$el = el

2.执行beforeMount钩子函数

代码：callHook(vm, 'beforeMount')

3.创建更新函数updateComponent

代码：

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

4.创建watcher对象，将updateComponent，组件更新函数交予watcher管理

代码：

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

5.执行mounted钩子函数

代码：callHook(vm, 'mounted')

$mount方法执行结束

总结

相对于第一天的内容，第二天的内容更为简单，主要基本上就是对beforeMount和mounted两个钩子函数之间，vue都做了哪些事情。$el在beforeMount之前才进行挂载。对模板进行解析，生成对应的render函数等操作都是在$mount内部执行的。下一步，讲一下watcher是如何于dep进行关联的，尽情期待。