将要创建 | 调用beforeCreate函数 |
创建完毕 | 调用 created函数 |
将要挂载 | 调用beforeMount函数 |
挂载完毕(重要) | 调用mounted函数 |
将要更新 | 调用beforeUpdate函数 |
更新完毕 | 调用updated函数 |
将要销毁(重要) | 调用beforeDestory函数 |
销毁完毕 | 调用destoryed函数 |
常用的生命周期钩子:
1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等(初始化操作)
2.beforeDestory:清除定时器、解除自定义事件、取消订阅消息等(首尾工作)
关于销毁Vue实例:
1.销毁后借助Vue开发者工具看不到任何信息
2.销毁后自定义事件会失效,但原生DOM事件依然有效
3.一般不会再beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了
原文链接:https://blog.csdn.net/m0_58151273/article/details/122359649
【mounted】挂载实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<body>
<div id="box">
<h2 :style="{opacity}">我是李逵</h2>
<button @click="begin">开始变化效果</button>
<button @click="stop">停止变化效果</button>
</div>
</body>
<script type="text/javascript">
var box = new Vue({
el: "#box",
data: {
opacity:1
},
methods: {
begin(){
this.timer=setInterval(()=>{
this.opacity=this.opacity-0.01;
if(this.opacity<=0){
this.opacity=1;
}
}
,16)
},
stop(){
// 销毁掉vm(box)
this.$destroy();
}
},
// vm(box)挂载后执行
mounted() {
this.timer=setInterval(()=>{
this.opacity=this.opacity-0.01;
if(this.opacity<=0){
this.opacity=1;
}
}
,16)
},
// vm(box)即将销毁时,清除掉定时器
beforeDestory(){
clearInterval(this.timer)
}
})
</script>
</html>