vue对象的生命周期
vue对象的生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click="kill">销毁vue对象</button>
<p v-show="isShow">显示</p>
</div>
<script>
var v=new Vue({
el:'#app',
data:{
isShow:true
},
/***
* 初始化阶段
* **/
beforeCreate(){
console.log("创建之前执行");
},
created(){
console.log("创建之后执行");
},
beforeMounted(){
console.log("beforeMounted");
},
mounted(){//mounted回调函数在 初始化页面显示之后立即调用
console.log("页面初始化显示之后执行");
this.interid=setInterval(() => {
console.log("---")
this.isShow=!this.isShow
},1000)
},
/***
* 更新阶段
* **/
beforeUpdate(){
console.log("beforeUpdate");
},
updated(){
console.log("updated");
},
/***
* 销毁阶段
* ***/
beforeDestroy(){//vm对象死亡之前调用此方法
console.log("销毁之前执行");
clearInterval(this.interid);
},
destroyed(){//死亡之后执行
console.log("destroyed");
},
methods:{
kill(){
//销毁vue对象
this.$destroy();
}
}
})
</script>
</body>
</html>
fixed
没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。