关于 Vue2.0 的生命周期

前言

Vue实例从创建开始到结束销毁的一系列过程,在这个过程中会有特定阶段的钩子函数,这些钩子函数会在 Vue 的各个状态中执行。
总体上分为 8 个阶段:创建前/创建后;挂载前/挂载后;更新前/更新后;销毁前/销毁后。


详细

钩子函数 说明
beforeCreate() 在Vue实例完全被创建出来之前执行的钩子函数,此时 data,methods 中的数据未绑定到 vue 实例中
created() 该钩子函数执行的时候,data 和 methods 中的属性和方法已经绑定到了 Vue 实例中,但 Dom 还未生成
beforeMount() 这个钩子函数表示虚拟 Dom 已经渲染完毕,但尚未把其渲染到页面中,仅仅在内存中渲染成虚拟 Dom
mounted() 此时,虚拟 Dom 已经挂载(渲染)到页面中,虚拟 Dom 变成真实的 Dom
beforeUpdated() 实例更新之前,也就是响应式数据更新的时候调用,在虚拟 Dom 打补丁之前
updated() 实例更新之后,在虚拟 Dom 重新渲染和打补丁之后调用
beforeDestroy() 实例销毁前调用,但在这一步中,实例任然完全可用,this 仍获取到实例,这是最后的机会
destroyed() 实例销毁后调用,最后什么都没了

深入

首先放一张官方的生命周期的图

vue生命周期

接下来,就从这张图慢慢的讲起
首先,我们 new 一个 vue 实例出来之后,刚刚初始化完成之后调用 beforeCreated 这个钩子函数,

实例

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
import Vue from 'vue'

const vm = new Vue({
el: '#app',
data: {
message: '早知如此绊人心,何如当初莫相识。'
},
methods: {
getMessage() {
return this.message;
},
changeMessage() {
this.message = '入我相思门,知我相思苦。'
}
},
components: {
changeButton: {
template: `
<button>改变message<button/>
`
}
},
beforeCreate() {
console.group('beforeCreate 创建前 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
},
created() {
console.group('created 创建后 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
},
beforeMount() {
console.group('beforeMount 挂载前 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log(this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
},
mounted() {
console.group('mounted 挂载后 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log(this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
},
beforeUpdate() {
console.group('beforeUpdate 更新前 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log(this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
},
updated() {
console.group('update 更新后 ====>');
console.log('%c%s', 'color: red', 'el :' + this.$el);
console.log(this.$el);
console.log('%c%s', 'color: red', 'message :' + this.message);
console.log('%c%s', 'color: red', 'getMessage() :' + this.getMessage());
}
})

待更…

------ 本文结束 ------

版权声明

Tflin's Blog by Tan Feng Lin is licensed under a Creative Commons BY-NC-ND 4.0 International License.
谭丰林创作并维护的Tflin's Blog博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
本文首发于Tflin's Blog 博客( http://tflin.com ),版权所有,侵权必究。