每个 Vue 实例在被创建时都要经过一系列的初始化过程,同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
生命周期显示图:
取自Vue官网
<template>
<div id="lifeinfo">
<p>组件的生命周期</p>
<button @click="changeData">修改数据</button>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name: "lifeinfo",
beforeCreate() {
// 该组件初始化之前 执行的钩子函数
console.log("初始化之前");
},
created() {
//改组件初始化完成之后
console.log("初始化完成之后");
},
data() {
return {
msg: "修改之前的数据"
};
},
methods:{
changeData(){
this.msg="修改之后的数据";
}
},
beforeMount() {
// 该组件挂载之前
console.log("挂载之前");
},
mounted() {
// 该组件挂载完成
console.log("挂载完成");
},
beforeUpdate() {
// 该组件修改之前
console.log("修改之前",this.msg);
},
updated() {
// 该组件修改之后
console.log("修改之后",this.msg);
},
beforeDestroy() {
// 该组件卸载之前
console.log("卸载之前");
},
destroyed() {
// 该组件卸载之后
console.log("卸载之后");
}
};
</script>