Vue的生命周期:Vue实例的创建、运行、到销毁称为vue的生命周期
8个阶段:
beforeCreate():创建之前,获取不到数据和methods;初始化中,初始化事件和生命周期,生命周期函数会自动执行。
created():创建,获取到数据和methods,但页面没有元素,是假的HTML,初始化data,methods和props及所有的选项,并给数据对象添加劫持。
beforeMount():挂载之前,获取data数据和方法,但页面仍没有元素,会编译el选项,对应的结构作为数据,通过complie函数结合为虚拟DOM对象。
mounted():挂载,获取到data数据和方法,HTML是可以操作的结构,会根据虚拟的DOM创建vm.$el,可真正操作HTML结构,并把el选项的模板代替。
beforeUpdate():更新之前,数据更新完成,能得到最新数据,页面还没更新。
updated():更新后,数据更新完成,可以得到最新数据,页面更新完成。
beforeDestory():销毁之前,可以获取data数据、方法、HTML是真正的HTML,还没真正销毁。
destoryed():销毁后,可以获取data数据,vm提供的DOM操作失效。
这些阶段可以给用户在不同阶段添加1自己代码的机会。
生命周期钩子 = 生命周期函数 = 生命周期事件,三个说法一个意思。
以上解释均来自官网的生命周期图。
每个vue实例都要经过一系列的初始化过程,如设置数据监听,编译模板,将实例
挂载到DOM并在数据变化时更新DOM等,同时在这个过程中也会运行一些叫做生命
钩子的函数,给了用户在不同阶段添加自己代码的机会
1.初始化显示
beforeCreate()
created()
beforMount()
mounted():说明页面准备好了
2.更新显示
beforeUpdate()
updated()
3.死亡
beforeDestory()
destoryed()
常用的生命周期方法
created()/mounted():发送ajax请求,启动定时器等异步任务
bedoreDestory():做收尾工作:如:清除定时器
实例:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var app = new Vue({
el:"#app",
data() {
return {
isShow:true,
}
},
beforeCreate() {
console.log("beforeCreate()");
},
created() {
console.log("created()");
},
beforeMount() {
console.log("beforeMount()");
},
mounted() {//初始化显示之后立即调用,调用一次
console.log("mounted()");
this.timer = setInterval(() => {
this.isShow = !this.isShow;
//现在的this指向Vue,因为setInterval里面有箭头函数,this指向父元素的this
//因为mounted的this是Vue对象,所以现在的this仍然指向Vue
// alert(this.isShow);
// console.log(this);
}, 1000);
},
beforeUpdate() {
console.log("beforeUpdate()");
},
updated() {
console.log("updated()");
},
//清除定时器,如果不清除定时器,则标签内容不再变化,但计时器不会停止
beforeDestroy() {//死亡之前调用,调用一次
console.log("beforeDestroy()");
clearInterval(this.timer);
},
destroyed() {
console.log("destroyed()");
},
methods: {
destoryVue:function(){
this.$destroy();
}
},
});
};
</script>
</head>
<body>
<div id="app">
<button @click="destoryVue">destory</button>
<p v-show="isShow">热爱可抵岁月漫长</p>
<p>{{isShow}}</p>
</div>
</body>