生命周期函数(钩子):
init Events & Lifecycle :初始化:生命周期,事件,但数据代理还未开始。
beforeCreate:此时,无法通过vm访问到data中的数据,methods中的方法。
init injections & reactivity:初始化:数据监测、数据代理。
created:此时,可以通过vm访问到data中的数据,methods中配置的方法。
此阶段Vue开始解析模板,生成虚拟DOM(内存中),页面还不能显示解析好的内容。
beforeMount:此时,1:页面呈现的是未经Vue编译的DOM结构;2:所有对DOM的操作,最终都不奏效。
Create vm:
e
l
a
n
d
r
e
p
l
a
c
e
"
e
l
"
w
i
t
h
i
t
:
将
内
存
中
的
虚
拟
D
O
M
转
为
真
实
D
O
M
插
入
页
面
。
m
o
u
n
t
e
d
:
此
时
:
1.
页
面
中
呈
现
的
是
经
过
V
u
e
编
译
的
D
O
M
;
2.
对
D
O
M
的
操
作
均
有
效
(
尽
可
能
避
免
)
。
至
此
初
始
化
过
程
结
束
,
一
般
在
此
进
行
:
开
启
定
时
器
、
发
送
网
络
请
求
、
订
阅
消
息
、
绑
定
自
定
义
事
件
等
初
始
化
操
作
。
b
e
f
o
r
e
U
p
d
a
t
e
:
此
时
:
数
据
是
新
的
,
但
页
面
是
旧
的
,
即
:
页
面
尚
未
和
数
据
保
持
同
步
。
V
i
r
t
u
a
l
D
O
M
r
e
−
r
e
n
d
e
r
a
n
d
p
a
t
c
h
:
根
据
新
数
据
,
生
成
新
的
虚
拟
D
O
M
,
随
后
与
旧
的
虚
拟
D
O
M
进
行
比
较
,
最
终
完
成
页
面
更
新
,
即
:
完
成
了
M
o
d
e
l
−
>
V
i
e
w
的
更
新
。
u
p
d
a
t
e
d
:
此
时
:
数
据
是
新
的
,
页
面
也
是
新
的
,
即
:
页
面
和
数
据
保
持
同
步
。
W
h
e
n
v
m
.
el and replace "el" with it:将内存中的虚拟DOM转为真实DOM插入页面。 mounted:此时:1.页面中呈现的是经过Vue编译的DOM;2.对DOM的操作均有效(尽可能避免)。至此 初始化过程结束,一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件等 初始化操作。 beforeUpdate:此时:数据是新的,但页面是旧的,即:页面尚未和数据保持同步。 Virtual DOM re-render and patch:根据新数据,生成新的虚拟DOM,随后与旧的虚拟DOM 进行比较,最终完成页面更新,即:完成了Model->View的更新。 updated:此时:数据是新的,页面也是新的,即:页面和数据保持同步。 When vm.
elandreplace"el"withit:将内存中的虚拟DOM转为真实DOM插入页面。mounted:此时:1.页面中呈现的是经过Vue编译的DOM;2.对DOM的操作均有效(尽可能避免)。至此初始化过程结束,一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。beforeUpdate:此时:数据是新的,但页面是旧的,即:页面尚未和数据保持同步。VirtualDOMre−renderandpatch:根据新数据,生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面更新,即:完成了Model−>View的更新。updated:此时:数据是新的,页面也是新的,即:页面和数据保持同步。Whenvm.destroy() is called
beforeDestroy:此时:vm中所有的data、methods、指令等等,都处于可用状态,马上要执行销毁
过程,一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。这一阶段
不再触发beforeUpdate和updated流程。
destroyed:销毁vm。
常用的生命周期钩子:
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效,但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。