生命週期 ?

Vue.js 實體的一生: 建立 --> 更新 --> 銷毀

圖取自 A Complete Guide to Vue Lifecycle Hooks – with Vue 3 Updates

生命週期的事件可以拆成兩個 hooks (callback function)，事件前 & 事件後！

主要有 4 個主要的事件可以使用 (等同於 8 個 hooks ):

• Creation 建立元件
• Mounting 掛載 DOM
• Updates 資料被更新
• Destruction 元件摧毀

取自Vue.js in Action

怎麼用

這些在生命週期相關階段的 function (hooks)，可以當做 option 在 Vue 實體中使用。
ex:

<script>     
   export default {         
      mounted() {             
         console.log('mounted!')         
      },         
      updated() {             
         console.log('updated!')         
      }     
   }
</script>

若使用 Vue 3 可以透過 Composition API，import hooks 到專案中就可以使用。
ex:

<script>
import { onMounted } from 'vue'

// 完整
//import {
//  onBeforeMount,
//  onMounted,
//  onBeforeUpdate,
//  onUpdated,
//  onBeforeUnmount,
//  onUnmounted,
//  onActivated,
//  onDeactivated,
//  onErrorCaptured
//} from "vue";

export default {
   setup () {
   // 寫在setup()中
     onMounted(() => {
       console.log('mounted in the composition api!')
     })
   }
}
</script>

對照表:

參考

A Complete Guide to Vue Lifecycle Hooks – with Vue 3 Updates

下篇預告

• 生命週期

每日一句:
還好家目錄回來了