一、概念
vue生命周期，又叫生命周期钩子函数，是组件从创建到销毁的过程。
二、主要的八大生命周期
1.首先，为方便观察每个周期的特点，我们模拟一个"one"组件的创建与销毁，并在八个生命周期中分别打印挂载点、属性、方法以及真实的DOM结构，通过输出结果进行分析。
<div id="myApp">
<input type="button" value="创建与销毁" @click="isShow= !isShow">
<one v-if="isShow"></one>
</div>
<script>
new Vue({
el:"#myApp",
data:{
isShow:true
},
components: {
one:{
template:`
<div>
<input type="text" v-model="userName">
<p ref="my">{{num}}</p>
</div>
`,
data(){
return {
userName:"生命周期",
num:0,
}
},
methods:{
fn(){
console.log(this.userName);
}
},
beforeCreate(){
console.group("创建之前beforeCreate**************************");
console.log(this.$el); //挂载点
console.log(this.userName); //属性
console.log(this.fn); //方法
console.log(this.$refs.my); //通过this.$refs可以访问真实的DOM结构
console.groupEnd();
},
created(){
console.group("创建之后created*******************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my);
console.groupEnd();
},
beforeMount(){
console.group("挂载之前beforeMount********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my);
console.groupEnd();
},
mounted(){
console.group("挂载之后mounted********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my);
console.groupEnd();
},
beforeUpdate(){
console.group("更新视图数据之前beforeUpdate********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my.innerText);
console.groupEnd();
},
updated(){
console.group("更新视图数据之后updated********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my.innerText);
console.groupEnd();
},
beforeDestroy(){
clearInterval(this.timer);
console.group("vue实例销毁之前beforeDestroy********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my.innerText);
console.groupEnd();
},
destroyed(){
console.group("vue实例销毁之后destroyed********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my);
console.groupEnd();
} }
}
})
</script>
2.八大生命周期的特点
- beforeCreate() 创建前：当前生命周期函数主要用于初始化工作，此时可以创建一个loading；
created() 创建后：可以访问到vm身上所有属性和方法；会将data和methods身上所有的属性和方法都挂载在vm的实例身上；会在data身上所有属性添加getter/setter方法，因此若要进行前后端数据交互时必须在当前生命周期中进行"响应式原理";若数据未提前在data中进行绑定，那么这个属性身上不会有getter/setter方法，数据便不会动态改变；
beforeMount() 挂载前：数据和模板还未进行结合，访问不到真实的DOM结构，可以对数据做最后的的修改；
- mounted() 挂载后：数据和模板已经结合，可以通过this.$refs访问到真实的DOM结构；
- beforeUpdate() 更新前：当data中的数据发生改变时会执行，可以访问到真实DOM结构、对数据做最后的修改，当前生命周期函数中的数据和模板还没更新完成；
- updated() 更新后：数据更新后形成最新的DOM结构，当前是一个频繁触发的函数，因此要做一些时间绑定或实例化时，需要做一个提前判断；
- beforeDestroy() 销毁前：可以继续访问到真实DOM结构以及data中的数据，通常在这个生命周期函数中做一些事件绑定/移除的操作；
- destroyted() 销毁后：断开DOM与数据之间的关联，访问不到真实的DOM结构；
3.注意：
- 多次执行的生命周期函数：beforeUpdate()、updated()
- 组件第一次创建时会执行：beforeCreate()、created()、beforeMount()、mounted()