[Part 7 ] Vue.js 的精随-元件生命周期 (续)

摧毁阶段

这个阶段负责元件的移除，适合用来移除所有的事件监听以及任何会造成记忆体泄漏(memory leak)的程序

beforeUnmount() 和 onBeforeUnmounted()

ex:

 import { onMounted, onBeforeUnmount } from 'vue' 

 export default {
   setup () {
 
     const someMethod = () => {
       // do smth
     }
 
     onMounted(() => {
       console.log('mount')
       window.addEventListener('resize', someMethod);
     })
 
     onBeforeUnmount(() => {
       console.log('unmount')
       window.removeEventListener('resize', someMethod);
     })
 
   }
 } 

所以?

依据需求的不同在适合的对应阶段中，写入要执行的程序码，例如：总不会在建立阶段就想监听事件...

参考 Kuro 将生命周期浓缩成三大阶段:

图取自元件的生命周期与更新机制

这些Hooks 就像钩子一样，挂在这个 Vue 实体上，一但进入到某阶段中，就会去找是否有 hooks function 需要执行。所以我们可以决定要在这个实体上挂上什麽钩子！

图取自Vue Route Component Hooks

如果比喻成人的一生，觉得很像是生老病死一样，可以填入每个时期需要执行的事项，等到发生的时候，就去执行清单里的项目！

下篇预告

• 实作实作

每日一句:
冲刺周末，猴子远离我