vue3新增了什么钩子函数

Vue 3 新增了多个钩子函数，主要包括1、onBeforeMount、2、onMounted、3、onBeforeUpdate、4、onUpdated、5、onBeforeUnmount、6、onUnmounted、7、onRenderTracked、8、onRenderTriggered、9、onErrorCaptured。这些钩子函数进一步增强了 Vue 组件的生命周期管理，使开发者能更灵活、更细致地控制组件的行为和状态。

一、`onBeforeMount`

onBeforeMount 是在组件挂载到 DOM 之前调用的钩子函数。这使得开发者可以在组件被插入到页面之前执行一些操作，例如初始化数据或设置一些临时状态。

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

示例：

import { onBeforeMount } from 'vue';
export default {
  setup() {
    onBeforeMount(() => {
      console.log('Component is about to mount');
    });
  }
}

二、`onMounted`

onMounted 钩子函数在组件挂载到 DOM 后立即调用。这是最常用的钩子之一，因为它确保了 DOM 元素已经存在，可以进行 DOM 操作或 API 调用。

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

示例：

import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted');
    });
  }
}

三、`onBeforeUpdate`

onBeforeUpdate 在组件更新之前调用。这对于需要在更新前进行一些清理或准备工作的情况非常有用。

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

示例：

import { onBeforeUpdate } from 'vue';
export default {
  setup() {
    onBeforeUpdate(() => {
      console.log('Component is about to update');
    });
  }
}

四、`onUpdated`

onUpdated 在组件更新后立即调用。这个钩子非常适合在组件更新后执行一些操作，例如重新渲染图表或更新视图。

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

示例：

import { onUpdated } from 'vue';
export default {
  setup() {
    onUpdated(() => {
      console.log('Component has updated');
    });
  }
}

五、`onBeforeUnmount`

onBeforeUnmount 在组件卸载前调用。这允许开发者在组件被销毁前执行一些清理工作，例如取消订阅或清除计时器。

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

示例：

import { onBeforeUnmount } from 'vue';
export default {
  setup() {
    onBeforeUnmount(() => {
      console.log('Component is about to unmount');
    });
  }
}

六、`onUnmounted`

onUnmounted 在组件被卸载后调用。这是进行最终清理工作的好地方，例如移除事件监听器或销毁实例。

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

示例：

import { onUnmounted } from 'vue';
export default {
  setup() {
    onUnmounted(() => {
      console.log('Component has unmounted');
    });
  }
}

七、`onRenderTracked`

onRenderTracked 在组件的响应式依赖被跟踪时调用。这个钩子函数对于调试和优化性能非常有用，因为它可以帮助确定哪些依赖导致了组件重新渲染。

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

示例：

import { onRenderTracked } from 'vue';
export default {
  setup() {
    onRenderTracked((e) => {
      console.log('Render tracked:', e);
    });
  }
}

八、`onRenderTriggered`

onRenderTriggered 在组件的响应式依赖引发重新渲染时调用。这与 onRenderTracked 类似，但它关注的是具体触发渲染的依赖项。

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

示例：

import { onRenderTriggered } from 'vue';
export default {
  setup() {
    onRenderTriggered((e) => {
      console.log('Render triggered:', e);
    });
  }
}

九、`onErrorCaptured`

onErrorCaptured 钩子函数用于捕获子组件的错误。这使得父组件能够处理错误，从而提高应用的健壮性。

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

示例：

import { onErrorCaptured } from 'vue';
export default {
  setup() {
    onErrorCaptured((err, instance, info) => {
      console.error('Error captured:', err, instance, info);
      return false; // 若返回 false，则阻止该错误继续向上传播
    });
  }
}

总结：Vue 3 新增的这些钩子函数极大地丰富了组件生命周期的管理方式，使开发者能够更加精细地控制组件的行为和状态。通过合理运用这些钩子，开发者可以提高代码的可维护性和性能，并增强应用的健壮性。为了进一步掌握这些钩子函数，建议开发者多加练习和实际应用，以便在项目中灵活运用。