Vue2 及 Vue3 生命週期改變

前言

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