vue源码探索之首次渲染调试

1、vue初始化，初始化实例成员和静态成员

2、调用vue的构造函数，在构造函数里面调用this._init()方法

3、完整版本vm.$mount方法（包含编译器），如果没有传入render，就会把template模板通过compileToFunction编译成render方法，并且把render存入options里面

4、调用运行时版本的vm.$mount方法（不含编译器），会重新获取el，然后调用mountComponent方法，

5、mountComponent方法里面

• 会判断是否含有render选项，如果不存在，并且传入了template选项，开发环境下会发送警告

• 触发beforeMount钩子

• 定义updateComponent方法

  • vm._render()生成虚拟dom
  • vm._update()将虚拟dom转成真实dom

• 创建Watcher实例，传入updateComponent方法，调用get()方法

• Watcher.get()

  • 创建完watcher会调用一个get()

  • 调用vm._update创建VNode

    • 调用render.call(vm._renderProxy,vm.$createElement)

    • 调用传入的render或者编译template生成的render返回VNode

  • 调用vm._upadte(Vnode,...)

    • 调用vm.__patch__将虚拟dom转化为真实dom

• 触发mounted钩子

• 返回vm实例