03.生命周期.md
goer ... 2022-01-06 小于 1 分钟
[toc]
# 生命周期函数
Vue实例在被创建时都要经过一系列的初始化过程(需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。),过程中也会运行一些叫做生命周期钩子的函数
不应该使用箭头函数来定义一个生命周期方法
<script>
var app = new Vue({
el:'#app',
data:{
msg:'hello vue!!!',
},
// 页面创建之前的生命周期
befoerCreate:function(){
console.log('befoerCreate');
},
//实例创建完成之后被调用
create:function(){
console.log('create');
},
//挂载开始前被调用
beforeMount:function(){
console.log('beforMount');
},
// el被创建的vm.$el 替换，挂载成功
mounted:function(){
console.log('mount');
},
//数据更新时调用
beforeUpdate:function(){
console.log('beforUpdata');
},
//组件dom已经更新，组件更新完毕
updated:function(){
console.log('updated');
}
});
setTimeout(() => {
app.msg = '-----change-----';
},3000);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
activated: 组件激活是调用
deavtivated: 组件停用是调用