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

生命周期 ?

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

下篇预告

• 生命周期

每日一句:
还好家目录回来了