第一章 Vue核心 第十七节 Vue的生命周期
17.1 引出生命周期
生命周期：
1.又名：生命周期回调函数、生命周期函数、生命周期钩子
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
4.生命周期函数中的this指向是vm 或 组件实例对象
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1.引出生命周期</title> <script src="../lib/vue.js"></script> <link rel="stylesheet" href="../../鼠标指针样式.css"/> </head> <body> <div id="root"> <h2 :style="{opacity}">欢迎学习Vue</h2> </div> <script type="text/javascript"> Vue.config.productionTip = false; const vm = new Vue({ el:'#root', data:{ opacity:1 }, methods:{ }, mounted(){ //Vue完成模板的解析并把初始的真实的DOM元素放入页面后（挂载完毕）调用mounted let temp = -0.01; setInterval(()=>{ this.opacity += temp; if(this.opacity <= 0 || this.opacity > 1){ temp *= -1; } },16); } }); //通过外部的定时器实现（不推荐） // let temp = -0.01; // setInterval(()=>{ // vm.opacity += temp; // if(vm.opacity <= 0 || vm.opacity > 1){ // temp *= -1; // } // },16); </script> </body> </html>
17.2 分析生命周期
生命周期函数（生命周期钩子） 8个 4对
beforeCreate(){} 此时无法通过vm访问到data中的数据、methods中的方法 数据代理、数据监测创建之前
created(){} 此时可以通过vm访问到data中的数据、methods中的方法
beforeMount(){} 此时：1.页面呈现的是未经Vue编译的DOM结构 2.所有对DOM的操作，最终都不奏效
mounted(){} 此时：1.页面中呈现的是经过Vue编译的DOM 2.对DOM的操作均有效（尽可能避免）。
至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作 （重要）
beforeUpdate(){} 此时数据是新的，但页面是旧的，即：页面尚未和数据保持同步
updated(){} 数据是新的，页面也是新的，即页面和数据保持同步
beforeDestroy(){} 此时vm中所有的：data、methods、指令等等，都处于可用状态，马上要执行销毁过程，
一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等首尾操作 （重要）
destroyed(){} 此时vm（Vue实例）被销毁
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2.分析生命周期</title> <script src="../lib/vue.js"></script> <link rel="stylesheet" href="../../鼠标指针样式.css"/> </head> <body> <div id="root"> <h2>当前的n值是:{{ n }}</h2> <button @click="add">n+1</button> <br/> <button @click="bye">点我销毁vm</button> <br/> <img :src="img" alt="" /> </div> <script type="text/javascript"> Vue.config.productionTip = false; const vm = new Vue({ el:'#root', data:{ n:1, img:'../生命周期.png' }, methods:{ add(){ this.n++; }, bye(){ this.$destroy(); } }, //此时无法通过vm访问到data中的数据、methods中的方法 beforeCreate(){//数据代理、数据监测创建之前 console.log('beforeCreate'); // console.log(this); // debugger; }, //此时可以通过vm访问到data中的数据、methods中的方法 created(){ console.log('created'); // console.log(this); // debugger; }, //此时：1.页面呈现的是未经Vue编译的DOM结构 2.所有对DOM的操作，最终都不奏效 beforeMount(){ console.log('beforeMounted'); // debugger; }, //此时：1.页面中呈现的是经过Vue编译的DOM 2.对DOM的操作均有效（尽可能避免）。 // 至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作 mounted(){ console.log('mounted'); // debugger; }, //此时数据是新的，但页面是旧的，即：页面尚未和数据保持同步 beforeUpdate(){ console.log('beforeUpdate'); // console.log(this.n); // debugger; }, //数据是新的，页面也是新的，即页面和数据保持同步 updated(){ console.log('updated'); // console.log(this.n); // debugger; }, //此时vm中所有的：data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等首尾操作 beforeDestroy(){ console.log('beforeDestroy'); // console.log(this.n); // debugger; }, //此时 destroyed(){ console.log('destroyed'); } }); </script> </body> </html>
17.3 总结生命周期
常用的生命周期钩子：
1.mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化工作】。
2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会爱beforeDestroy操作数据，因为即便操作，也不会再触发更新流程了。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>总结生命周期</title> <script src="../lib/vue.js"></script> <link rel="stylesheet" href="../../鼠标指针样式.css"/> </head> <body> <div id="root"> <h2 :style="{opacity}">欢迎学习Vue</h2> <button @click="stop"> 点我停止变化 </button> <button @click="opacity = 1">透明的设置为1</button> </div> <script type="text/javascript"> Vue.config.productionTip = false; const vm = new Vue({ el:'#root', data:{ opacity:1 }, methods:{ stop(){ this.$destroy(); } }, mounted(){ //Vue完成模板的解析并把初始的真实的DOM元素放入页面后（挂载完毕）调用mounted let temp = -0.01; this.timer = setInterval(()=>{ this.opacity += temp; if(this.opacity <= 0 || this.opacity > 1){ temp *= -1; } },16); }, beforeDestroy() { console.log('vm即将驾鹤西游了'); clearInterval(this.timer); } }); </script> </body> </html>
浙公网安备 33010602011771号