Vue 3 中的生命週期方法

介紹

Vue 3，漸進式 JavaScript 框架，為開發人員提供了一套強大的工具來建立動態和反應式 Web 應用程式。 Vue 的核心功能之一是它的生命週期方法，它允許開發人員掛鉤組件生命週期的不同階段。這些方法在選項 API 和組合 API 中均可使用，為您建立程式碼提供了靈活性。

在本文中，我們將探索 Vue 3 中可用的生命週期方法，比較它們在 Options API 和 Composition API 中的用法，並提供實際範例來說明其應用。

內容

選項 API 與組合 API

在 Vue 3 中，您可以使用選項 API 或組合 API 定義生命週期方法。 Options API 是定義元件選項的傳統方式，而 Composition API 提供了更靈活和模組化的方法，對於複雜的應用程式特別有用。

生命週期方法

下圖展示了 Vue 組件的生命週期階段：

創建前

• 選項 API：不需要
• Composition API：不需要

此鉤子在建立元件實例之前呼叫。

已創建

• 選項 API：不需要
• Composition API：不需要

建立元件實例後呼叫此鉤子。

掛載前

• 選項 API: beforeMount
• 組合 API：onBeforeMount

此鉤子在元件掛載到 DOM 之前被呼叫。

範例：

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

安裝的

• 選項 API：已安裝
• 組合 API：onMounted

當元件掛載到 DOM 時會呼叫此鉤子。

範例：

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

更新前

• 選項 API：更新前
• 組合 API：onBeforeUpdate

此鉤子在元件更新之前呼叫。

範例：

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

已更新

• 選項 API：已更新
• 組合 API：onUpdated

元件更新後呼叫此鉤子。

範例：

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

解除安裝前

• 選項 API: beforeUnmount
• 組合 API：onBeforeUnmount

此鉤子在元件卸載之前呼叫。

範例：

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

未安裝的

• 選項 API：已卸載
• 組合 API：onUnmounted

元件卸載後呼叫此鉤子。

範例：

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

錯誤捕獲

• 選項 API：errorCaptured
• 組合 API：onErrorCaptured

當從子元件捕獲錯誤時呼叫此鉤子。

範例：

<script>
export default {
  updated() {
    console.log('Component has been updated');
  }
}
</script>

<script setup>
import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('Component has been updated');
});
</script>

渲染追蹤

• 選項 API：renderTracked
• 合成 API：onRenderTracked

當渲染期間追蹤響應式依賴項時，會呼叫此鉤子。

範例：

<script>
export default {
  beforeUnmount() {
    console.log('Component is about to be unmounted');
  }
}
</script>

<script setup>
import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  console.log('Component is about to be unmounted');
});
</script>

渲染觸發

• 選項 API：renderTriggered
• 合成 API：onRenderTriggered

當響應式依賴觸發渲染時呼叫此鉤子。

範例：

<script>
export default {
  unmounted() {
    console.log('Component has been unmounted');
  }
}
</script>

<script setup>
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('Component has been unmounted');
});
</script>

概括

理解並利用 Vue 3 中的生命週期方法對於管理元件生命週期的不同階段至關重要。無論您喜歡選項 API 還是組合 API，Vue 3 都提供了一套全面的掛鉤來幫助您有效地控制元件的行為。透過掌握這些生命週期方法，您可以建立更有效率且可維護的 Vue 應用程式。

編碼愉快！ ？

如果您有任何疑問，請隨時問我！

如果您喜歡我的帖子，請支持我：

---

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