探索学习 Vue 生命周期篇
Vue 官网: https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/
第五篇:生命周期-总结
生命周期-总结
细节点
- 在data 中没有定义的属性,在mounted 、 methods方法中都需要用到,如何来操作,一个小技巧
data:{ name:'安锐捷' }, methods: { stop(){ clearInterval(this.timer) } }, mounted() { console.log("mounted:",this); this.timer = setInterval(() => { this.opacMouFlag -= 0.01 if(this.opacMouFlag < 0){ this.opacMouFlag = 1 } }, 16); },
需求1 点击按钮,停止变换透明度
- 思路: 因为透明度的改变是通过定时器改变的,所以直接停止定时器即可
- 直接上代码
<div id="root"> <h1>你好,{{name}}</h1> <hr/> <h2 :style="{opacity}">欢迎学习Vue</h2> <button @click="stop">点我停止变换</button> </div> <script type="text/javascript"> Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示 const vm = new Vue({ el: "#root", data: { name: "安锐捷", opacity: 1 ,// 透明度 }, methods: { change(){ }, stop(){ //clearInterval(this.timer) 温柔停止定时器 this.$destroy() // 暴力停止,直接销毁 } }, // Vue 完成模板的解析,并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted mounted() { this.timer = setInterval(() => { this.opacMouFlag -= 0.01 if(this.opacMouFlag < 0){ this.opacMouFlag = 1 } }, 16); }, }) </script>
- 思考:由于暴力停止,直接销毁 之后,定时器还在进行定时,所以需要连定时器一块停止,引出需求2
需求2 点击按钮,停止变换透明度 销毁的同时,停止定时器
-
思路: 使用beforeDestroy 方法实现
-
直接上代码
<div id="root"> <h1>你好,{{name}}</h1> <hr/> <h2 :style="{opacity}">欢迎学习Vue</h2> <button @click="stop">点我停止变换</button> </div> <script type="text/javascript"> Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示 const vm = new Vue({ el: "#root", data: { name: "安锐捷", opacity: 1 ,// 透明度 }, methods: { change(){ }, stop(){ //clearInterval(this.timer) 温柔停止定时器 this.$destroy() // 暴力停止,直接销毁 } }, // Vue 完成模板的解析,并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted mounted() { console.log("mounted:",this); this.timer = setInterval(() => { this.opacMouFlag -= 0.01 if(this.opacMouFlag < 0){ this.opacMouFlag = 1 } }, 16); }, beforeDestroy() { console.log("销毁之前停止定时器因为 vm 即将驾鹤西游"); clearInterval(this.timer) }, }) </script>
使用beforeDestroy 之后,观察页面,发现 在点击 按钮之后,调用了
this.$destroy()
,在销毁触发的那一刻同时调用了销毁 beforeDestroy 进行了停止定时器 最后再进行了 destroyed -
总结
- 常用的生命周期钩子:
- mounted: 发送ajax 请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
- beforeDestory: 清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]
-
关于销毁Vue 实例
- 销毁后借助Vue 开发者工具看不到任何信息
- 销毁后自定义事件会失效,但原生DOM事件依然有效。
- 一般不会再beforeDestroy 中操作数据,因为即使操作数据,也不会再触发更新流程了;
故书不厌百回读,熟读深思子自知——宋.苏轼《送安惊落第诗》
创作不易,欢迎 多多点赞,收藏 各节里面总结的还有不到位的欢迎指证
邮箱:pymxb1991@163.com
微信:py_mxb