前言
Vue 是一個現代開發框架，擁有完尚的生態系，讓我們可以將須多元件客製化，做出組件，並且可重複利用，高擴充性。在開發組件時，每個組件都擁有自己的生命周期，Vue 組件會偵測每個變數值，是否有變，並且更新內容，今天要一個一個了解 Vue 的生命週期，讓大家有更多認識。
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
