Vue2 及 Vue3 生命週期改變
IPFS
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/embed/285c5b28-cd88-4d9a-bb1a-aa428cb15787.png/public)
前言
Vue 是一個現代開發框架,擁有完尚的生態系,讓我們可以將須多元件客製化,做出組件,並且可重複利用,高擴充性。在開發組件時,每個組件都擁有自己的生命周期,Vue 組件會偵測每個變數值,是否有變,並且更新內容,今天要一個一個了解 Vue 的生命週期,讓大家有更多認識。
Vue 的生命週期
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/embed/86336a34-cbae-46ca-a1cf-63158c1ac78a.webp/public)
使用方式
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
感謝大家的支持,我會為大家寫有幫助的文章,你(妳)們的支持是我寫作的動力