vue生命周期

vue提供了组件从创建到销毁过程中不同阶段的钩子函数,不同的钩子函数可操作的vue实例属性是不一样的;在组件开发的过程中,钩子函数发挥着自己的独特的作用。

1.beforeCreate 和 created

这两个钩子函数用在vue组件创建时开始调用,处在vue分配数据节点前后,如下测试代码:

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
<body>
<div id="app"></div>

<script src="dist/vue.js"></script>
<script>
var MyComponent = {
template: `
<div>
<p>{{ message }}</p>
</div>
`,
data: function() {
return {
message: 'Hello Vue'
}
},
beforeCreate: function() {
console.log(this.message);
},
created: function() {
console.log(this.message);
}
}

var vm = new Vue({
el: '#app',
components: {
'my-component': MyComponent
},
template: '<my-component/>'
});
</script>
</body>

输出结果:

  • beforeCreate 时候vue还没分配数据,所以取不到插件data里面的值
  • created 时vue已经结束数据配置,实例化了vue对象
  • 应用:created 一般用来ajax请求后台数据,初始化插件数据

2. beforeMount 和 mounted

在两个钩子函数在vue挂在到dom时节点的前后触发

1
2
3
4
5
6
7
8
{
beforeMount: function() {
console.log(document.getElementsByTagName('div')[0]);
},
mounted: function() {
console.log(document.getElementsByTagName('div')[0]);
}
}

输出结果:

  • beforeMount 主要是获取vue挂载前的原dom
  • mounted 是主要获取vue挂载后的dom,这两个函数都是值触发一次

3. beforeUpdate 和 updated

这两个钩子函数发生在修改vue组件data数据渲染dom视图的节点前后,如下代码:

1
2
3
4
5
6
7
8
9
10
{
beforeUpdate: function() {
console.log('修改数据之前的dom');
console.log(document.body.children[0].outerHTML);
},
updated: function() {
console.log('修改数据之后的dom');
console.log(document.body.children[0].outerHTML);
}
}

输出结果:

  • beforeUpdate 主要是获取修改数据后vue重新渲染视图前的dom数据,而 update 刚好相发

4. beforeDestroy 和 destroyed

这两个钩子函数发生在组件销毁节点的前后,如下代码

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
36
37
38
39
<script>
var MyComponent = {
template: `
<div>
<p>{{ message }}</p>
</div>
`,
data: function() {
return {
message: 'Hello Vue'
}
},
beforeCreate: function() {
console.log(this.message);
},
created: function() {
console.log(this.message);
},
beforeDestroy: function() {
console.log('beforeDestory');
},
destroyed: function() {
console.log('destoryed');
}
}

var vm = new Vue({
el: '#app',
components: {
'my-component': MyComponent
},
template: '<my-component v-if="isExsit"></my-component>',
data: function() {
return {
isExsit: true
}
}
});
</script>

输入如下:

  • beforeDestroy主要是拿到组件销毁前的数据,进行本地缓存等操作
  • destroyed一般是销毁事件,释放内存等操作

5. deactivated 和 activated

一般我们不会去频繁的创建和销毁组件,用的比较多得是去启用和停用组件。所以这两个钩子分别用在停用和启用组件后触发。v-if 为了不让组件销毁,要把组件包裹在vue的内置组件 keep-alive 里面,如下测试代码:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script>
var MyComponent = {
template: `
<div>
<p>{{ message }}</p>
</div>
`,
data: function() {
return {
message: 'Hello Vue'
}
},
beforeCreate: function() {
console.log(this.message);
},
created: function() {
console.log(this.message);
},
beforeDestroy: function() {
console.log('beforeDestory');
},
destroyed: function() {
console.log('destoryed');
},
deactivated: function() {
console.log('组件被停用');
},
activated: function() {
console.log('组件被激活');
}
}

var vm = new Vue({
el: '#app',
components: {
'my-component': MyComponent
},
template: `
<keep-alive>
<my-component v-if="isExsit"></my-component>
</keep-alive>
`,
data: function() {
return {
isExsit: true
}
}
});
</script>

输出结果如下:

  • keep-alive 只能和 v-if 嵌套,嵌套后组件不在被销毁,销毁钩子函数不再被调用