new Vue()的过程

回顾

如果有感兴趣的同学可以看看我之前的源码分析文章，这里呈上链接：《Vue源码分析系列：目录》

• 'platforms/web/entry-runtime-with-compiler'
  • 'platforms/web/runtime/index'
    • 'core/instance/index',定义Vue.
      • initMixin(),定义_init().
        • _init()
          • options合并 合并配置
          • initRender(),定义$createElement() createElement的执行过程
            • 调用createComponentcreateComponent的执行过程
          • 生命周期beforeCreate()
          • initState(),将data代理至Vue._data data的代理
          • 生命周期created()
          • 执行$mount，挂载#app $mount执行过程
      • lifecycleMixin(),定义了_update(),$forceUpdate(),$destroy().
      • renderMixin(),定义了$nextTick(),_render().
        • _render()
          • 调用用户自定义的render(),用户调用了$createElement()
  • 定义了一个$mount(runtime 版本的$mount),调用mountComponent()
    • 'core/instance/lifecycle',定义mountComponent()
      • 生命周期beforeMount()
      • 定义updateComponent()
        • 调用_render()，生成一个VNode render的执行过程
        • 调用_update(),传入_render()生成的VNode
          • 调用__pathch__，渲染至DOM patch的执行过程、组件的patch过程
      • 生成渲染watcher
        • 生命周期beforeUpdate()
      • 生命周期mounted()
  • 重新定义了一个$mount()
    • 新的$mount()(runtime + compiler 的$mount)
      • 编译template,生成render
      • 调用$mount(调用 runtime 版本的$mount)

从new Vue()开始 => init初始化Vue => $mount挂载 => complier编译模板 => render渲染VNode => update更新DOM => patchDOM打补丁 => DOM