Vue 3 新增钩子函数详解调用了就像给组件挂载前做个小准备

Vue 3 新增钩子函数详解

Vue 3 给我们带来了很多新的钩子函数，这些函数可以让开发者更灵活地控制组件的行为和状态。

一、`onBeforeMount`

这个钩子在组件挂载到 DOM 之前调用。就像给组件挂载前做个小准备。

用途：在组件挂载前执行初始化操作。

示例：

onBeforeMount(() => {

  // 这里可以进行数据初始化

})

二、`onMounted`

这个钩子在组件挂载到 DOM 后立即调用。这时候 DOM 元素已经准备好了，可以执行一些 DOM 操作或 API 调用了。

用途：在组件已经被插入到 DOM 后执行操作。

示例：

onMounted(() => {

  // 这里可以进行 DOM 操作或 API 调用

})

三、`onBeforeUpdate`

组件更新前会调用这个钩子，如果你需要在更新前做一些清理工作，这就是好时机。

用途：在组件更新前执行操作。

示例：

onBeforeUpdate(() => {

  // 这里可以进行清理工作

})

四、`onUpdated`

组件更新后立即调用这个钩子，适合做一些更新后的操作。

用途：在组件更新后执行操作。

示例：

onUpdated(() => {

  // 这里可以进行更新后的操作

})

五、`onBeforeUnmount`

组件卸载前调用这个钩子，可以用来执行一些清理工作，比如取消订阅或清除计时器。

用途：在组件卸载前执行清理操作。

示例：

onBeforeUnmount(() => {

  // 这里可以进行清理工作

})

六、`onUnmounted`

组件被卸载后调用这个钩子，适合进行最后的清理工作，比如移除事件监听器或销毁实例。

用途：在组件卸载后执行清理操作。

示例：

onUnmounted(() => {

  // 这里可以进行最后的清理工作

})

七、`onRenderTracked`

当组件的响应式依赖被跟踪时，这个钩子会被调用。对于调试和优化性能很有帮助。

用途：用于调试和优化性能。

示例：

onRenderTracked((event) => {

  // 这里可以处理跟踪事件

})

八、`onRenderTriggered`

当组件的响应式依赖引发重新渲染时，这个钩子会被调用。和 `onRenderTracked` 类似，但更关注具体的依赖项。

用途：用于调试和优化性能。

示例：

onRenderTriggered((event) => {

  // 这里可以处理触发渲染的事件

})

九、`onErrorCaptured`

这个钩子可以捕获子组件的错误，让父组件有机会处理这些错误，增强应用的健壮性。

用途：捕获和处理子组件错误。

示例：

onErrorCaptured((error, instance, info) => {

  // 这里可以处理捕获到的错误

  return false; // 阻止错误继续向上传递

})

Vue 3 的这些新钩子函数让我们有了更多的控制权，可以更细致地管理组件的生命周期。通过学习和实践，我们可以更好地利用这些钩子，写出更高效、更健壮的代码。

Vue 3 去掉了一些 Vue 2 中的钩子，引入了新的钩子，比如 `onRenderTracked` 和 `onRenderTriggered`，这些改动都是为了提升性能和开发体验。