vue2生命周期
2024-12-09 11:13:16

工作时候用的特别熟悉的内容,如今竟然有一种生疏的感觉。

正文

重新整理一下,免得面试时候露怯。

基础内容

定义:组件从 创建 到 销毁 的整个过程就是生命周期

作用:特定的时间点,执行特定的操作

场景:组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据

分类: 4大阶段8个方法

  • 初始化
  • 挂载
  • 更新
  • 销毁
钩子函数 触发的行为 在此阶段可以做的事情
beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。 加loading事件
created vue实例的数据对象data有了,$el还没有 结束loading、请求数据为mounted渲染做准备
beforeMount vue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换。
mounted vue实例挂载完成,data.filter成功渲染 配合路由钩子使用
beforeUpdate data更新时触发
updated data更新时触发 数据更新时,做一些处理(此处也可以用watch进行观测)
beforeDestroy 组件销毁时触发
destroyed 组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在 组件销毁时进行提示

钩子函数

创建期间的生命周期函数

beforeCreate(初始化界面前)

实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性

created(初始化界面后)

实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板

挂载期间的生命周期函数

beforeMount(渲染DOM前)

此时已经完成了模板的编译,但是还没有挂载到页面中

mounted(渲染DOM后)

此时,已经将编译好的模板,挂载到了页面指定的容器中显示

运行期间的生命周期函数

beforeUpdate(更新数据前)

状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点

updated(更新数据后)

实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!

销毁期间的生命周期函数

beforeDestroy(卸载组件前)

实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed(卸载组建后)

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

测试代码

组件模板自己试着写就好,此处贴js代码

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
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})

</script>

激活与未激活的生命周期

activated()

被 keep-alive 缓存的组件激活时调用。

该钩子在服务器端渲染期间不被调用。

deactivated()

被 keep-alive 缓存的组件停用时调用。

该钩子在服务器端渲染期间不被调用。

捕获错误

2.5.0+ 新增

errorCaptured()

你可以在此钩子中修改组件的状态。因此在捕获错误时,在模板或渲染函数中有一个条件判断来绕过其它内容就很重要;不然该组件可能会进入一个无限的渲染循环。

钩子函数的理解

所有的生命周期钩子自动绑定this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此this与你期待的 Vue 实例不同,this.fetchTodos的行为未定义。

结语

也算是温故而知新了,太久没看的vue2相关的内容了,捕获错误这个之前一直没有,如今也算是新发现了。

参考链接

原帖:Vue生命周期(简单易懂,超详细)