timbai
timbai

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

CC BY-NC-ND 4.0

感謝大家的支持,我會為大家寫有幫助的文章,你(妳)們的支持是我寫作的動力

Loading...

Comment