Vue2 及 Vue3 生命週期改變
前言
Vue 是一個現代開發框架，擁有完尚的生態系，讓我們可以將須多元件客製化，做出組件，並且可重複利用，高擴充性。在開發組件時，每個組件都擁有自己的生命周期，Vue 組件會偵測每個變數值，是否有變，並且更新內容，今天要一個一個了解 Vue 的生命週期，讓大家有更多認識。
Vue 的生命週期
| hook 名稱(v2.x Options Api) | 對應 hook 名稱(v3.x Composition API) | 說明 |
|---|---|---|
| beforeCreate | setup() | vue 被建立實體尚未初始化 |
| created | setup() | vue 被建立實體尚未初始化 |
| beforeMount | onBeforeMonut | Vue 實體尚未與模板 (DOM 節點) 綁定 |
| mounted | onMonut | Vue 實體尚未與模板 (DOM 節點) 綁定 |
| beforeUpdate | onBeforeUate | 當狀態被變動時，畫面同步更新前 |
| update | onUpdated | 當狀態被變動時，畫面已同步更新完成 |
| beforeDestroy | onBeforeUnmount | Vue 實體物件被銷毀前 |
| destroy | onUnmounted | Vue 實體物件被銷毀完畢 |
使用方式
Vue3 使用生命週期，使用方式非常直覺，當 Vue 執行到不一樣的生命週期時，就會自動執行不一樣的生命週期方法
<template>
<div class="home">
{{count}}
</div>
</template>
<script>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from '@vue/runtime-core';
export default {
name: 'HomeView',
setup() {
const count = ref(0)
onBeforeMount(() => {
console.log('onBeforeMount')
});
onMounted(() => {
console.log('onMounted')
});
onBeforeUpdate(() => {
console.log('onBeforeUpdate');
});
onUpdated(() => {
console.log('onUpdated');
});
onBeforeUnmount(() => {
console.log('onBeforeUnmount');
})
onUnmounted(() => {
console.log('onUnmounted');
})
return {
count
}
}
};
</script>
補充說明
- Vue3 可以向下相容 Vue2 的支援
- 使用 Vue (Composition API) 時，不要使用 Vue (Options Api) 的 this，如果要使用 Composition API 的話，就全部使用 Composition API
留言
發佈留言