vue2_12、生命周期
生命周期
1、引出生命周期
生命周期
1.又名：生命周期回调函数、生命周期回调函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm实例 或 组件实例对象。
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2 v-bind:style="{opacity:opacity}">欢迎学习vue</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue启动时生成生产提示
const vm=new Vue({
el:"#root",
data:function(){
return {
opacity:1,
}
},
//Vue完成模板的解析并把初始的真实dom元素放入页面后(挂载完毕)就调用mounted，只会调用一次，即使更新data数据重新解析模板时也不会调用。
mounted() {//mounted函数只是vue生命周期中的一个函数，vue会mounted函数前前后后调用多个别的函数。
console.log("mounted",this);//this就是vm实例
setInterval(() => {
this.opacity-=0.01;
if(this.opacity<=0) this.opacity=1;
}, 16);
},
});
</script>
</body>
2、分析生命周期：
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>当前n的值为：{{n}}</h2>
<button v-on:click="add">点击n的值+1</button>
<button @click="bye">点我销毁vm实例</button>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue启动时生成生产提示
const vm=new Vue({
el:"#root",
data:function(){
return {
n:1,
}
},
methods:{
add(){
console.log("add");
this.n++;
},
bye(){
console.log("vue的实例vm已经被销毁，无法再使用vm了");
//销毁之后，绑定的事件只会留下原生的dom绑定 ，事件里面涉及到vm的操作就无效了 。
this.$destroy();
}
},
watch:{
n:{
handler:function(newVal,oldVal){
console.log("n变了");
}
}
},
beforeCreate() {
console.log("beforCreate被调用");
},
created() {
console.log("created被调用");
},
beforeMount() {
console.log("beforeMount被调用");
},
mounted() {
console.log("Mount被调用");
//console.log(this);
//debugger;
//$el里面缓存的是一份真实的dom
//console.log(this.$el);
},
beforeUpdate() {
console.log("beforeUpdate被调用");
},
updated() {
console.log("updated被调用");
this.n=99;//这里改不会重复调用updated()死循环，因为第二次调用update方法时候data里的n值没有变，还是n=99，所以就不会嵌套调用了。
////this.n=98;//如果这个命令和上面同时写会死循环，因为会一直让data里的n的值发生改变
console.log(this.n);
},
beforeDestroy() {
console.log("beforeDestroy被调用");
console.log(this.n);
//this.add();//在此阶段调用vue管理的事件，但是里面对vm实例的数据修改的操作不会触发更新页面的操作了。
},
destroyed() {
console.log("destroyed被调用");
},
});
</script>
</body>
3、总结生命周期：
常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2 v-bind:style="{opacity:opacity}">欢迎学习vue</h2>
<button @click="stop">点我停止变化</button>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue启动时生成生产提示
const vm=new Vue({
el:"#root",
data:function(){
return {
opacity:1,
}
},
methods:{
stop(){
//销毁vm
this.$destroy();
}
},
mounted() {
this.timer=setInterval(() => {
this.opacity-=0.01;
if(this.opacity<=0) this.opacity=1;
}, 16);
},
beforeDestroy() {
console.log("vm即将被销毁");
//清除定时器
clearInterval(this.timer);
},
});
</script>
</body>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？