秋招复习计划-Vue知识点2

  |  

前言

一个完整的Vue对象的声明周期会经过哪些生命函数,或者说钩子函数


52



一个完整的生命周期

先上一个官图,来看看一个Vue实例的完整声明周期

生命周期

再用一个表格来看看声明周期中的具体函数在有哪些,具体在什么时候得到执行

钩子函数 详情 场景
beforeCreate 实例初始化之前,组件正在创建的时候,这时候el和data都是undefined 可以加入loading事件,或者向后端发送数据请求
created 实例创建完成后,data、methods被初始化 结束loading事件,推荐这个时候发送请求数据,因为methods已经被初始化了,尤其是返回的数据与绑定事件有关
beforeMount 挂载初始之前,完成el初始化,render被初次调用 在服务器端渲染期间不会被调用
mount 完成挂载 获取el中DOM元素,进行DOM操作;如果返回的数据操作以来DOM完成,推荐这个时候发送请求
beforeUpdate 组件更新之前
updated 由于数据更改,重新渲染页面时调用 可执行以来DOM的操作
activated 组件被激活时调用
deactivated 组件被移除时调用
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>声明周期函数</title>
<script type='text/javascript' src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id='app'>
<p>{{ message }}</p>
<button v-on:click='change()'>change</button>
<button v-on:click='destr()'>destroy</button>
</div>

<script type='text/javascript'>
var app = new Vue({
el: '#app',
data: {
message: 36
},
beforeCreate() {
console.group('beforeCreate 创建前');
console.log('el: ' + this.$el);
console.log('data: ' + this.$data);
console.log('message: ' + this.message);
},
created() {
console.group('create 创建完毕');
console.log('el: ' + this.$el);
console.log('data: ' + this.$data);
console.log('message: ' + this.message);
},
beforeMount() {
console.group('beforeMount 挂载前');
console.log('el: ' + this.$el);
console.log('data: ' + this.$data);
console.log('message: ' + this.message);
},
mounted() {
console.group('mounted 挂载完毕');
console.log('el: ' + this.$el);
console.log('data: ' + this.$data);
console.log('message: ' + this.message);
},
beforeUpdate() {
console.group('beforeUpdate 更新前');
console.log('el: ' + this.$el);
console.log('data: ' + this.$data);
console.log('message: ' + this.message);
},
updated() {
console.group('updated 更新完成');
console.log('el: ' + this.$el);
console.log('data: ' + this.$data);
console.log('message: ' + this.message);
},
beforeDestroy() {
console.group('beforeDestroy 销毁前');
console.log('el: ' + this.$el);
console.log('data: ' + this.$data);
console.log('message: ' + this.message);
},
destroyed() {
console.group('destroyed 销毁完成');
console.log('el: ' + this.$el);
console.log('data: ' + this.$data);
console.log('message: ' + this.message);
},
methods: {
change() {
this.message++;
},
destr() {
this.destroy();
}
}
})
</script>
</body>
</html>

加载页面

页面1

这时候的控制台

控制台1

通过这个例子我们就能清楚的知道一个Vue实例在页面具体显示之前会经过哪几个生命周期函数。并且在哪里数据被初始化,哪里实例被挂载到DOM上

接下来点击change按钮

页面

页面2

控制台

控制台2

可以看见在beforeUpdate中,data中的数据就已经更新了。

我们再按一下destory按钮

控制台3

文章目录
  1. 1. 一个完整的生命周期
  2. 2. 一个例子
|