Vue 常用的生命週期鉤子
阿新 • • 發佈：2022-04-21
mounted：一般做 初始化操作 如：傳送 ajax 請求、啟動定時器、繫結自定義事件、訂閱訊息
beforeDestro：一般做 收尾工作 如：清除定時器、解綁自定義事件、取消訂閱訊息
例項
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用的生命週期鉤子</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h3 :style="{opacity}">你好</h3> <button @click="stop">不要閃爍了</button> </div> </body> <script type="text/javascript"> new Vue({ el: '#root', data: { opacity: 1 }, methods: { stop() { // 銷燬 Vue例項 this.$destroy() } }, // Vue 完成模板的解析並把初始的真實的DOM元素放入頁面後（掛載完畢）呼叫 mounted mounted() { this.timer = setInterval(() => { this.opacity -= 0.01 if (this.opacity <= 0) this.opacity = 1 }, 16) }, // 在 Vue例項 銷燬之前被呼叫，一般做收尾工作 beforeDestroy() { clearInterval(this.timer) } }) </script> </html>
關於銷燬 Vue 例項
- 銷燬後自定義事件會失效，但原生 DOM 事件依然有效
- 一般不會在 beforeDestro 操作資料，即使操作資料，也不會觸發更新流程了