介紹

Vue 3，漸進式 JavaScript 框架，為開發(fā)人員提供了一套強大的工具來構(gòu)建動態(tài)和反應(yīng)式 Web 應(yīng)用程序。 Vue 的核心功能之一是它的生命周期方法，它允許開發(fā)人員掛鉤組件生命周期的不同階段。這些方法在選項 API 和組合 API 中均可用，為您構(gòu)建代碼提供了靈活性。

在本文中，我們將探索 Vue 3 中可用的生命周期方法，比較它們在 Options API 和 Composition API 中的用法，并提供實際示例來說明其應(yīng)用。

內(nèi)容

選項 API 與組合 API

在 Vue 3 中，您可以使用選項 API 或組合 API 定義生命周期方法。 Options API 是定義組件選項的傳統(tǒng)方式，而 Composition API 提供了更靈活和模塊化的方法，對于復(fù)雜的應(yīng)用程序特別有用。

生命周期方法

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

創(chuàng)建前

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

此鉤子在創(chuàng)建組件實例之前調(diào)用。

已創(chuàng)建

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

創(chuàng)建組件實例后調(diào)用此鉤子。

掛載前

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

此鉤子在組件掛載到 DOM 之前調(diào)用。

示例：

<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

當(dāng)組件掛載到 DOM 時會調(diào)用此鉤子。

示例：

<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

此鉤子在組件更新之前調(diào)用。

示例：

<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

組件更新后調(diào)用此鉤子。

示例：

<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

此鉤子在組件卸載之前調(diào)用。

示例：

<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

組件卸載后調(diào)用此鉤子。

示例：

<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

當(dāng)從子組件捕獲錯誤時調(diào)用此鉤子。

示例：

<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

當(dāng)渲染期間跟蹤響應(yīng)式依賴項時，會調(diào)用此鉤子。

示例：

<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>

渲染觸發(fā)

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

當(dāng)響應(yīng)式依賴觸發(fā)渲染時調(diào)用此鉤子。

示例：

<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 中的生命周期方法對于管理組件生命周期的不同階段至關(guān)重要。無論您喜歡選項 API 還是組合 API，Vue 3 都提供了一套全面的掛鉤來幫助您有效地控制組件的行為。通過掌握這些生命周期方法，您可以創(chuàng)建更高效??且可維護的 Vue 應(yīng)用程序。

編碼愉快！ ？

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

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

---

以上是Vue 3 中的生命周期方法的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！