如何應用方法以及理解Vue 3的生命週期原理

原理概述

Vue 3的生命週期（Lifecycle）指的是元件從創建到銷毀經歷的一系列事件，在這些事件中可以執行一些操作，例如初始化資料、渲染視圖、載入異步數據等。在Vue 3中，透過setup()函數來定義組件的生命週期。

實例分析

Vue 3的生命週期包含了以下幾個階段：

1. beforeCreate

在實例建立之前，即在初始化之前被調用。此時，尚未初始化元件實例，無法存取data、methods和computed等屬性，在元件狀態初始化之前執行一些操作。

export default {
  beforeCreate() {
    console.log('beforeCreate');
  }
}

2. created

在實例建立之後，即在初始化之後被呼叫。此時，已經完成了資料觀測等配置，但尚未掛載DOM，並且可以存取data、methods和computed等屬性。可以使用created鉤子函數進行資料初始化和事件的監聽等操作。

import { onMounted, onUnmounted } from 'vue';

export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    console.log('created');
  },
  mounted() {
    onMounted(() => {
      console.log('component mounted');
    });
  },
  unmounted() {
    onUnmounted(() => {
      console.log('component unmounted');
    });
  }
}

3. beforeMount

在掛載開始之前被呼叫。在此階段中，尚未渲染真實的DOM節點。可以使用beforeMount鉤子函數，在元件掛載之前進行一些非同步操作，例如載入動畫等。

export default {
  beforeMount() {
    console.log('beforeMount');
  }
}

4. mounted

在掛載結束後被呼叫。此時，元件已經渲染出真實的DOM。 mounted鉤子函數往往用於初始化DOM操作以及與伺服器互動後填充元件的數據，例如透過ref取得DOM節點和註冊事件監聽器等。

export default {
  mounted() {
    console.log('mounted');
    const button = this.$refs.myButton;
    button.addEventListener('click', () => {
      this.count++;
    });
  }
}

5. beforeUpdate

在資料更新前被呼叫。此時，可以在更新之前存取舊的資料狀態。可以使用beforeUpdate鉤子函數，在元件資料更新之前執行一些操作，例如動態綁定class和style等。

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}

6. updated

在資料更新之後被呼叫。此時，元件已經更新DOM，可以透過存取最新的資料狀態來完成DOM的操作。可以使用updated鉤子函數，在元件資料更新之後執行一些操作，例如觸發動畫效果等。

export default {
  updated() {
    console.log('updated');
  }
}

7. beforeUnmount

在元件卸載之前被呼叫。此時，元件實例仍然完全可用，但是它的視圖已經被銷毀並且不再更新。可以使用beforeUnmount鉤子函數，在元件卸載之前執行一些清理操作，例如取消事件監聽器、計時器和非同步請求等。

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}

8. unmounted

在元件卸載之後被呼叫。此時，元件實例以及其所有相關聯的DOM元素已銷毀，無法再存取元件內部資料和方法。可以使用unmounted鉤子函數，在元件卸載之後執行一些最終清理操作。

export default {
  unmounted() {
    console.log('unmounted');
  }
}

要注意的是，Vue 3中去掉了一些生命週期函數，例如activated、deactivated和errorCaptured等，這些可以透過新的Composition API來實現。

以上是如何應用方法以及理解Vue 3的生命週期原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！