介紹

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

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

內(nèi)容

選項(xiàng) API 與組合 API

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

生命周期方法

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

創(chuàng)建前

• 選項(xiàng) API：不需要
• Composition API：不需要

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

已創(chuàng)建

• 選項(xiàng) API：不需要
• Composition API：不需要

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

掛載前

• 選項(xiàng) 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>

安裝的

• 選項(xiàng) API：已安裝
• 組合 API：onMounted

當(dāng)組件掛載到 DOM 時(shí)會(huì)調(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>

更新前

• 選項(xiàng) 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>

已更新

• 選項(xiàng) 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>

卸載前

• 選項(xiàng) 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>

未安裝的

• 選項(xiàng) 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>

錯(cuò)誤捕獲

• 選項(xiàng) API：errorCaptured
• 組合 API：onErrorCaptured

當(dāng)從子組件捕獲錯(cuò)誤時(shí)調(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>

渲染跟蹤

• 選項(xiàng) API：renderTracked
• 合成 API：onRenderTracked

當(dāng)渲染期間跟蹤響應(yīng)式依賴項(xiàng)時(shí)，會(huì)調(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ā)

• 選項(xiàng) API：renderTriggered
• 合成 API：onRenderTriggered

當(dāng)響應(yīng)式依賴觸發(fā)渲染時(shí)調(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 中的生命周期方法對(duì)于管理組件生命周期的不同階段至關(guān)重要。無(wú)論您喜歡選項(xiàng) API 還是組合 API，Vue 3 都提供了一套全面的掛鉤來(lái)幫助您有效地控制組件的行為。通過(guò)掌握這些生命周期方法，您可以創(chuàng)建更高效??且可維護(hù)的 Vue 應(yīng)用程序。

編碼愉快！ ？

如果您有任何疑問(wèn)，請(qǐng)隨時(shí)問(wèn)我！

如果您喜歡我的帖子，請(qǐng)支持我：

---

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