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中文网其他相关文章！