Vue 3在生命周期钩子函数的设计方面的目标之一是尽量减少组件状态的管理，提高代码的可读性和模块化。Vue 3 的生命周期主要围绕着Composition API设计展开，这使得生命周期的使用更加灵活和直观。而Vue 2在这方面的设计思想则是把不同阶段所需的操作都分离出来方便维护和调试。

(资料图)

以下是Vue 2和 Vue 3 生命周期的对比及其详细介绍:

一、 Vue 2 的生命周期钩子函数beforeCreate

在实例化之后、数据初始化之前被调用。此时模板已经编译成了 render 函数并且创建了虚拟 DOM，但是还未完成注入 data 和 computed 属性，也未执行方法或处理事件。因此，如果再 Vue 实例里需要自定义一些 property 属性或者使用 $store 等全局变量，那么这个时机就非常适合，否则可能会报错。

created

在实例化后数据初始化后被调用。在 created 阶段，data 和 computed 已经被注入而 methods、watcher、events 等事件以及 template/render 函数都还没发生过回调调用。 Vue 实例已经被完全渲染出来，DOM 也已经渲染好了，我们可以在这个阶段绑定监听器，但是只能对状态做出反应，不能改变状态。你的组件实例现在已经准备好了，可以被挂载到 DOM 树上。

beforeMount

在挂载之前被调用 。当 Vue 实将要挂载到 DOM 时执行该方法。 在此阶段，Vue 的 render 函数已经返回虚拟 DOM 并进行了 diff 算法计算，即将来会更新视图的内容已被计算，但是尚未应用到视图上。

mounted

当 Vue 实例挂载到 DOM 上后调用 。这说明现在真正的执行 DOM 和 Webpack 文件打包工作均完成，Vue插件安装、数据依赖关系初始化等等也都已完成，因此可以进行一些需要操作 DOM 的任务。mounted 仅仅保证了在该钩子函数中可以正常访问 DOM 元素，所有的 Mounted 过程并不是一次性完全输出，而是一个叠加效果:首先最开始的 mounted 先执行（包含其内部子组件），接着是子孙组件的 mounted。

beforeUpdate

在当前组件更新前被调用，即数据更新前 DOM 更新前。当数据改变导致模板重新渲染时，面向用户的界面还没有被更新，这时就会调用 beforeUpdate 钩子。因为数据已经发生变化，但是页面的数据并没有变 （如果有修改数据的话，使用 $nextTick）。 可以通过在钩子函数中对状态的操作，从而让状态修改后立即生效，这样做同样是不推荐的。

updated

当前组件更新结束之后调用(即由于数据更新而触发重新渲染过后)。这里就需要注意的是 updated 与 mounted 非常相似。不同在于 updated 是每次数据更新都会执行，而 mounted 只会执行一次。

activated

keep-alive 组件激活时调用。 activated 钩子函数仅仅在使用 keep-alive 组件时才能被触发。使用 keep-alive 包裹的组件在被销毁时，其缓存的状态会保存。当再次需要使用该组件时，缓存的状态会恢复。这个时候 activated 就会被调用。

deactivated

keep-alive 组件停用时调用。 deactivated 不同 activated 一样，deactivated 钩子函数仅仅在使用 keep-alive 组件时才能被触发。当 keep-alive 组件从文档中移除并停用时，deactivated 就会被调用了。

beforeDestroy

在一个 Vue 实例销毁之前调用。这个时候 Vue 组件实例完全可用，用户界面依然可以互动。 beforeDestroy 发生时如有监听器要指定清理工作，请务必在此时进行清理以避免内存溢出等问题的出现。

destroyed

在一个 Vue 实例销毁之后调用。这个时候代表着组件已经完全的被销毁，那么组件对象也就变得毫无价值。所有的事件监听器、数据绑定和子组件也已经被移除了。

errorCaptured

当捕获一个来自子孙组件的错误时会调用这个钩子。用于统计错误、日志上报等收集异常信息。

二、Vue 3 的生命周期钩子函数

Vue 3 在生命周期设计上摆脱了 Vue 2 的基于代码顺序的设计，转而使用了基于 API 的逐步执行。

setup

组件选项中最先被执行的一个钩子函数是 setup。在这个钩子函数中可以设置 props、data、computed、methods 等函数或属性，并且需要将这些函数或属性暴露给模板中使用。setup 函数会在组件实例创建前执行，而这个函数所提供的所有属性都会被视为响应式数据，也就是说，可以通过类似于 data 中所提供的语法去访问和更新它们。

onBeforeMount

与 beforeMount 的作用一致，在组件即将被安装时执行。

onMounted

与 mounted 的作用一致，在组件已经被安装后立即执行。

onBeforeUpdate

与 beforeUpdate 的作用一致，在组件即将更新时执行。

onUpdated

与 updated 的作用一致，在 DOM 被更新同步后执行。

onErrorCaptured

与 errorCaptured 的作用一致，可以捕获子孙组件抛出的错误并进行统计和上报。

onBeforeUnmount

与 beforeDestroy 的作用一致，在组件即将被卸载时执行。在这个阶段内部状态还是可用的。

onUnmounted

与 destroyed 的作一致，在组件已经被卸载并且其对应的视图 DOM 已经被清空之后执行。

onRenderTracked

在 Vue 3 中新增了一个钩子函数 onRenderTracked，可以用于捕获组件渲染的过程中哪些数据被访问，哪些数据被修改等。这对于诊断 Vue 应用的性能问题是非常有帮助的。

onRenderTriggered

与 onRenderTracked 功能相反, 它会在组件渲染的过程中，跟踪是什么引起了渲染的。这个钩子函数也可以用于优化组件渲染性能。

三、总结

Vue 3 的生命周期相较于 Vue 2 精简、灵活性更高，通过 Composition API 将所有数据操作集中到 setup 选项中，代码结构清晰，使得开发者可以更容易地按照需求组织代码并快速迭代。此外，Vue 3 增加了几个新的生命周期钩子函数，如 onRenderTracked 和 onRenderTriggered，可以通过这些新的 API 更好地优化应程序性能问题。