VUE生命周期

VUE实例从创建,运行到销毁这整个过程被称为VUE的生命周期,在生命周期中会经历生命周期事件,又可以称为生命周期钩子或者生命周期函数,这些函数是在VUE生命周期的特定时间触发的方法,使得使用者可以在生命周期中特定的阶段完成对应需求

生命周期函数

先放一张VUE官方的生命周期函数图,然后咱慢慢解释

创建

实例创建期间包含两个生命周期函数beforeCreatecreated

beforeCreate函数表示实例还未创建阶段,methods和data都没有初始化,无法被调用,created函数表示实例已在内存中创建,但是还没有开始编译模板,没有绑定到dom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default{
data: function(){
return{
msg:"helloworld"
}
},
beforeCreat(){
console.log("beforeCreat")
// 数据还未初始化
console.log(this._data)
console.log(this.msg)
console.log(this.$el)
},
created(){
console.log("created")
console.log(this._data)
console.log(this.msg)
// 还未绑定到dom
console.log(this.$el)
}
}

挂载

挂载期间包含两个生命周期函数,beforeMountmounted

beforeMount函数表示实例还未挂载,此时已经完成了模板的编译,但还未从内存挂载到页面,页面上模板中的表达式之类的还是字符串的形式 (能得到this.$el,但是this.$el.innerHTML还是原始值)

mounted函数表示实例已挂载到了页面指定的容器上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default{
data: function(){
return{
msg:"helloworld"
}
},
beforeMount() {
console.log("beforeMount");
// $el.innerHTML为原始值,直接输出会报错
console.log(this.$el.innerHTML);
},
mounted() {
console.log("mount");
// 可以获取$el.innerHTML
console.log(this.$el.innerHTML);
}
}

更新

当数据data发生变化有两个生命周期函数beforeUpdateupdated

beforeUpdate函数表示数据更新但是还没有渲染到页面的时候,这时候调用data中的数据都是更新后的数据,但是页面中的dom还没有刷新 (this.$el.innerHTML还是更新前的值),beforeUpdate方法自带两个参数,可以获取更新前后的数据

updated则意味着页面上的数据和更新后的数据同步了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default{
data: function(){
return{
msg:"helloworld"
}
},
beforeUpdate(oldVal, newVal) {
console.log("beforeUpdated")
// 更新之前的值
console.log(this.$el.innerHTML)
console.log(oldVal, newVal)
},
updated() {
console.log("updated")
// 更新之后的值
console.log(this.$el.innerHTML)
}
}

销毁

销毁阶段也包含了两个生命周期函数:beforeDestroy以及destroyed

beforeDestroy函数在Vue实例销毁前调用,所有data和methods都还可以正常使用,destroyed函数则在Vue实例完全销毁后调用,完全销毁指实例中所有内容解绑,事件监听移除,以及所有子实例销毁

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default{
data: function(){
return{
msg:"helloworld"
}
},
beforeDestroy() {
console.log("beforeDestory");
console.log(this.$el.innerHTML);
console.log(this.msg);
},
destroyed() {
console.log("destoryed");
console.log(this.$el.innerHTML);
console.log(this.msg);
}
}