《三》、Vue核心——生命周期
2019-08-09 本文已影响0人
神奇作手
Vue 实例生命周期
1、生命周期流程图
2、vue 生命周期分析
（1）、初始化显示；
① beforeCreate()；
②created()；
③ beforeMount()；
④mounted()；
（2）、更新状态：this.xxx=value；
① beforeupdate()；
① updated()；
（2）、销毁 vue 实例：vm.$destory()；
① beforeDestory()；
① destory()；
3、常用的生命周期方法
Ⅰ、create()/monuted()：发送 ajax 请求，启动定时器等异步任务；
Ⅱ、beforeDestory()：做收尾工作，如：清除定时器
4、编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue生命周期</title>
</head>
<body>
<!--
常用的生命周期函数：
created()/mounted(): 发送axios请求，启动定时器等异步任务
beforeDestory(): 做收尾工作，如：清除定时器
-->
<div id="app">
<button @click="destroyVM">destory vm</button>
<p v-show="isShow">学习IT课程</p>
</div>
<script src="../js/vue.2.6.10.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isShow: true,
},
//1、初始化阶段
beforeCreate(){
console.log("beforeCreate()");
},
created(){
console.log("created()");
},
beforeMount(){
console.log("beforeMount()");
},
mounted(){//初始化显示之后立即调用(1次)
console.log("mounted()");
this.intervalId = setInterval(()=>{
console.log("-------");
this.isShow = !this.isShow;
},1000)
},
//2、更新阶段
beforeUpdate(){
console.log("beforeUpdate()");
},
updated(){
console.log("updated()");
},
//3、死亡阶段
beforeDestroy(){//死亡之前调用(1次)
console.log("beforeDestroy()");
//清楚定时器
clearInterval(this.intervalId);
},
destroyed(){
console.log("destroyed()");
},
methods: {
destroyVM(){
//干掉VM
this.$destroy();
}
}
})
</script>
</body>
</html>
