在 Vue 3 中,可以在组件不同阶段的生命周期执行特定逻辑。
生命周期整体分为四个阶段:创建、挂载、更新、卸载。
创建阶段
setup()
- 这是组合式 API 的入口点,在组件实例创建之前被调用。
- 在此阶段,可以初始化响应式数据、定义方法等。但不能使用
this
,因为它不是传统选项式 API 的上下文。 - 可以通过
import { reactive, ref } from 'vue';
导入响应式函数来创建响应式数据。
挂载阶段
onBeforeMount()
注册一个钩子,在组件被挂载之前被调用。
- 作用
- 通常用于在组件挂载之前进行一些初始化操作,这些操作不依赖于 DOM 元素的存在。
- 例如,可以在这个阶段进行数据的预加载、初始化一些变量或者设置一些状态,为组件的挂载做好准备。
- 执行时机
- 在组件的
setup
函数执行之后,以及组件真正被挂载到 DOM 之前调用。
当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点,不能访问到 DOM 元素。它即将首次执行 DOM 渲染过程。
- 在组件的
- 注意事项
- 在
onBeforeMount()
阶段,组件尚未被挂载到 DOM,所以无法直接访问 DOM 元素。
- 在
- 这个钩子在服务器端渲染期间不会被调用。
onMounted()
注册一个回调函数,在组件挂载完成后执行。
- 作用
- 主要用于在组件被渲染并插入到 DOM 后,执行一些需要访问 DOM 元素或进行依赖 DOM 操作的任务。
- 例如,可以在这个阶段初始化第三方库、设置元素的初始状态、添加事件监听器等。
- 执行时机
- 在组件挂载到 DOM 后调用。意味着在组件及组件的所有子组件都被挂载之后调用。可以确保在
onMounted
中访问子组件的 DOM 元素是安全的。
- 在组件挂载到 DOM 后调用。意味着在组件及组件的所有子组件都被挂载之后调用。可以确保在
- 组件在以下情况下被视为已挂载:
- 其所有同步子组件都已经被挂载 (不包含异步组件或
<Suspense>
树内的组件)。 - 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时,才可以保证组件 DOM 树也在文档中。
- 其所有同步子组件都已经被挂载 (不包含异步组件或
- 这个钩子在服务器端渲染期间不会被调用。
更新阶段
onBeforeUpdate()
注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
- 作用
- 可以在这个阶段获取到组件更新前的状态,以便进行一些特定的处理或记录。
- 例如,可以在这个阶段保存一些当前的状态信息,以便在更新后进行比较或恢复。
- 执行时机
- 当响应式数据发生变化,并且 Vue 检测到需要更新组件时,在实际更新之前调用
onBeforeUpdate
。
- 当响应式数据发生变化,并且 Vue 检测到需要更新组件时,在实际更新之前调用
- 注意事项:
onBeforeUpdate
应该快速执行,避免进行耗时的操作,因为这可能会延迟组件的更新。onBeforeUpdate
通常与onUpdated
一起使用,以便在更新前后进行相应的处理。
- 这个钩子在服务器端渲染期间不会被调用。
onUpdated()
注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用。
在组件更新完成后执行。
-
作用
- 主要用于在组件的响应式数据变化导致重新渲染后执行一些操作。
- 可以在这个阶段安全地访问和操作更新后的 DOM 元素。
-
执行时机
- 在组件的 DOM 更新完成后调用。
- 父组件的更新钩子将在其子组件的更新钩子之后调用。
-
注意事项:
- 不要在
updated
钩子中更改组件的状态,这可能会导致无限的更新循环! - 如果需要在某个特定的状态更改后访问更新后的 DOM,请使用
nextTick()
。
- 不要在
-
这个钩子在服务器端渲染期间不会被调用。
卸载阶段
onBeforeUnmount()
注册一个钩子,在组件实例被卸载之前调用。
-
作用
- 主要用于在组件被销毁之前进行一些清理操作,例如取消订阅事件、清除定时器、移除 DOM 事件监听器等,以避免内存泄漏和不必要的资源占用。
- 可以在这个阶段保存一些组件的状态信息,以便在后续可能的重新创建中恢复。
-
执行时机
- 在组件即将被卸载,即从 DOM 中移除之前调用。此时组件的 DOM 元素仍然存在,可以被访问到。
-
注意事项:
- 当这个钩子被调用时,组件实例依然还保有全部的功能。
- 在
onBeforeUnmount
中进行清理操作时,要确保所有的资源都被正确地释放,以避免内存泄漏和其他潜在的问题。 - 这个钩子函数应该快速执行,避免进行耗时的操作,因为这可能会延迟组件的卸载过程。
-
这个钩子在服务器端渲染期间不会被调用。