1、Vue初始化 实例成员、静态成员
2、初始化结束后调用new Vue()构造函数
3、在new Vue()构造函数中调用this._init()方法,这个方法相当于整个vue的入口
4、在this._init()方法中定义了 vm.
m
o
u
n
t
(
)
此
处
定
义
的
mount() 此处定义的
mount()此处定义的mount为入口文件中的src\platforms\web\entry-runtime-with-compiler.js,
核心作用是把模板编译成render函数,首先会先判断是否传入render,如果没有传入,则会先获取template选项,如果template也没有,
则会把el中的内容作为模板,然后把模板编译成render函数,而这个过程是通过compileToFunctions()这个方法生成render(),最终将编译
好的render存入到options.render当中,即options.render = render()
5、调用 src\platforms\web\runtime\index.js 文件当中的 $mount 方法,在这个方法中会重新获取el,调用mountComponent()方法
6、mountComponent方法在 core/instance/lifecycle 这个文件中定义,在这个方法中首先会判断是否有render选项,如果没有但是传入了模板,
并且当前是开发环境的话会发送警告,目的是提示运行时版本不支持编译器。
触发beforeMount钩子函数
定义updateComponent函数,调用vm._update(vm._render()) 、vm._render()渲染,作用是渲染虚拟DOM,vm._update()更新,作用是将虚拟DOM转换成真实DOM
创建Watcher实例,调用updateComponent(),调用get()
触发mounted()
return vm
7、Watcher.get(),创建完watcher会调用一次get,在get方法中调用updateComponent(),vm._render(),在这个方法中调用render.call(vm._renderProxy,vm.
c
r
e
a
t
E
l
e
m
e
n
t
)
,
实
例
化
时
传
入
的
r
e
n
d
e
r
或
者
编
译
t
e
m
p
l
a
t
e
生
成
的
r
e
n
d
e
r
返
回
V
N
o
d
e
v
m
.
u
p
d
a
t
e
(
)
,
调
用
v
m
.
p
a
t
c
h
(
v
m
.
creatElement),实例化时传入的render或者编译template生成 的render 返回VNode vm._update(),调用vm._patch_(vm.
creatElement),实例化时传入的render或者编译template生成的render返回VNodevm.update(),调用vm.patch(vm.el.vnode)挂载真实DOM,记录vm.$el