Vue版本:2.6.10
- 首先进行Vue的初始化,初始化Vue的实例成员和静态成员
- 调用构造函数中的_init()方法,作为整个Vue的入口
- 在_init()中调用$mount()方法:
- 第一个$mount():在入口文件entry-runtime-with-compiler.js中。其核心作用是将模板(按照传入render>template>el的优先级作为模板)用compileToFunction()编译成render函数并存储在option.render中
- 第二个$mount():在runtime/index.js中。运行时版本不会走第一个mount(),所以仅会在这里中获取el
- 调用mountComponent(),src/core/instance/lifecycle.js中定义
- 判断render选项,若运行时版本&没有render&传入了模板,会警告运行时版本不支持编译器
- 触发beforeMount()
- 定义updateComponent(),该方法中调用了两个方法:
- _rende():调用了render.call(vm._renderProxy,vm$createElement)将用户传入的render()或者自己编译生成的render()生成的虚拟DOM返回
- _update():调用了__patch__(vm.$el,vnode)将虚拟DOM转换成真实DOM,并且挂载到页面上;将生成的真实DOM记录到vm.$el中。
- 创建Watcher对象。创建时传递了updateComponent()并在内部调用get()时调用了updateComponent()
- 触发mounted()
- return vm