详解Vue生命周期钩子

Vue生命周期钩子简介

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。（结尾附上生命周期图示）

生命周期钩子介绍

1、onBeforeMount()

onBeforeMount() 钩子被调用时组件已经完成了其响应式状态的设置（render函数首次被调用），但还没有创建 DOM 节点。即首次执行DOM渲染过程。

// 使用方法其它生命周期同样 
// 生命周期钩子也可以在一个外部函数中调用，不必须放在 setup() 或 <script setup> 内的词法上下文中，只要调用栈是同步的，且最终起源自 setup() 就可以。
onBeforeMount(() => {
    // 写需要这时候实现的函数，这些函数必须最终源自 setUp()就可以
})

2、onMounted()

在组件挂载完成后执行，组件在以下情况下被视为已挂载：

• 其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
• 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

这个钩子在服务器渲染期间不会被调用

3、onBeforeUpdate()

在组件即将因为响应式状态变更而更新其 DOM 树之前调用。这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

这个钩子在服务器端渲染期间不会被调用。

4、onUpdated()

在组件因为响应式状态变更而更新其 DOM 树之后调用。

其它：

• 父组件的更新钩子将在其子组件的更新钩子之后调用。
• 这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的，因为多个状态变更可以在同一个渲染周期中批量执行，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。如需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

5、onBeforeUnmount()

在组件实例被卸载之前调用，被调用时，组件实例依然还保有全部的功能。

6、onUnmounted()

在组件实例被卸载之后调用，一个组件在以下情况下被视为已卸载：

• 其所有子组件都已经被卸载。
• 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以利用这个钩子在页面被销毁时，清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

生命周期简单归纳

1、页面初始时直接触发

beforeCreate: 此时的data不可用
created: data可用，DOM不可用
onBeforeMount: 在这个钩子后，mounted生命周期钩子之前，render函数（渲染页面函数）首次被调用
onRenderTracked: 页面有取值操作时（如：绑定数据，e.g. 插值语法{{ count }}）触发
onMounted: 页面挂载完毕后触发

2、数据发生改变后触发

onRenderTriggered: 改变数据(e.g. set)
onBeforeUpdate: 在数据发生改变后，DOM被更新之前调用
onRenderTracked: 读取数据
onUpdated: DOM更新完毕之后调用

3、错误捕获

onErrorCaptured: 在捕获一个来自后代组件的错误时被调用。
此钩子会收到三个参数：错误对象、发送错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false以阻止该错误继续向上传播。
参数说明：
err：error错误对象
instance：组件实例
info：捕获的错误信息
errorCaptued返回false是为了阻止错误向上传播，避免错误的一直向上传递

生命周期图示