avatar

Vue实例的生命周期

Vue实例的生命周期

生命周期状态展示

Vue实例的生命周期中有多个状态。

生命周期图

测试beforeCreate和created两个钩子函数

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
<div id="app">
<h1>测试生命周期</h1>
</div>

<script>
var app = new Vue({
el:"#app",
data:{
msg:"12345"
},
//按照示意图依次调用
beforeCreate:function(){
console.log("调用了beforeCreate钩子函数");
},
created:function () {
console.log("调用了created钩子函数");
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
},
beforeUpdate: function () {
console.log("调用了beforeUpdate钩子函数")
},
updated: function () {
console.log("调用了updated钩子函数");
},
beforeDestroy: function () {
console.log("调用了beforeDestroy钩子函数")
},
destroyed: function () {
console.log("调用了destroyed钩子函数");
},
});
</script>

初始化页面依次调用了(打开控制台):

  1. 调用了beforeCreate钩子函数
  2. 调用了created钩子函数
  3. 调用了beforeMount钩子函数
  4. 调用了mounted钩子函数
  • tip

在beforeCreate和created之间,进行数据观测(data observer) ,也就是在这个时候开始监控data中的数据变化了,同时初始化事件。

测试beforeUpdate和update两个钩子函数

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
<div id="app">
<h1>测试生命周期</h1>
<div>{{msg}}</div>
<hr>
<h3>测试beforeUpdate和update两个钩子函数</h3>
<button @click="handlerUpdate">更新数据</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"12345"
},
methods: {
handlerUpdate:function(){
this.msg=this.msg.split("").reverse().join("");
},
},
beforeCreate:function(){
console.log("调用了beforeCreate钩子函数");
},
created:function () {
console.log("调用了created钩子函数");
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
},
beforeUpdate: function () {
console.log("调用了beforeUpdate钩子函数")
},
updated: function () {
console.log("调用了updated钩子函数");
},
beforeDestroy: function () {
console.log("调用了beforeDestroy钩子函数")
},
destroyed: function () {
console.log("调用了destroyed钩子函数");
},
});
</script>

点击更新数据后:

12345变成了54321,此时调用了:

  1. 调用了beforeUpdate钩子函数
  2. 调用了updated钩子函数
  • tip

在Vue中,修改数据会导致重新渲染,依次调用beforeUpdate钩子函数和updated钩子函数

如果待修改的数据没有载入模板中,不会调用这里两个钩子函数

测试beforeDestroy和destroyed两个钩子函数

打开F12控制台

直接输入app.$destroy()主动销毁Vue实例调用:

  1. 调用了beforeDestroy钩子函数
  2. 调用了destroyed钩子函数

测试beforeMount和mounted两个钩子函数

对于created钩子函数和beforeMount之间有判断:是否有el

1
2
3
4
5
6
7
8
9
10
11
12
13
14
new Vue({
beforeCreate: function () {
console.log('调用了beforeCreat钩子函数')
},
created: function () {
console.log('调用了created钩子函数')
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
}
})

此时不会出现:

  1. 调用了beforeMount钩子函数
  2. 调用了mounted钩子函数
  • tip

证明没有el选项,则停止编译,也意味着暂时停止了生命周期

生命周期到created钩子函数就结束了。而当我们不加el选项,但是手动执行vm.$mount(el)方法的话,也能够使暂停的生命周期进行下去.

载入前(完成了data和el数据初始化),但是页面中的内容还是vue中的占位符,data中的message信息没有被挂在到Dom节点中,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取。

载入后html已经渲染(ajax请求可以放在这个函数中),把vue实例中的data里的message挂载到DOM节点中去

总结

  • beforecreate : 可以在这加个loading事件
  • created :在这结束loading,还做一些初始数据的获取,实现函数自-执行
  • mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
  • beforeDestroy: 你确认删除XX吗?
  • destroyed :当前组件已被删除,清空相关内容
文章作者: Gy
文章链接: http://sgyat.cn/2021/03/17/Vue总结(六)/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 年轻没有梦
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论