vue3的生命周期有哪些

Vue 3 引入了新的生命周期钩子函数，并对一些旧的钩子函数进行了重构或删除。以下是一些 Vue 3 的生命周期钩子函数：

1、beforeCreate：在实例创建之前调用，此时还没有挂载，数据观测 (data observer) 和事件尚未初始化。

2、created：实例创建完成后调用，此时已经完成了数据观测 (data observer) 和事件初始化，但尚未挂载 DOM。

3、beforeMount：在挂载之前调用，相关的 render 函数首次被调用。可以在此时对模板进行编译和渲染。

4、mounted：实例已经挂载到 DOM 上后调用。在这个时候，所有的 el 和 ref 都已经被解析，并且 ￥refs 已经被填充。

5、beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。可以在此时进行状态更新或手动更改 DOM。

6、updated：数据更新完成后调用，发生在虚拟 DOM 打补丁和 DOM 更新之后。

7、beforeDestroy：实例销毁之前调用。在这个阶段，实例仍然完全可用。

8、destroyed：实例销毁后调用。调用后，所有的事件监听器和子组件都将被移除，所有的子组件的 destroyed 钩子也会被调用。

9、activated：当被激活的 keep-alive 组件重新进入时调用。

10、deactivated：当被激活的 keep-alive 组件离开时调用。

11、errorCaptured：在捕获阶段处理错误时调用。如果这个钩子没有返回值，或者返回 false，那么父组件的 errorCaptured 钩子会被继续调用；否则，该错误不会被进一步处理。

12、getDerivedStateFromProps：在每次渲染之前都会调用，用于从 props 派生出状态。这是一个静态方法，可以在组件创建之前或在组件销毁之后进行更改。

13、renderTracked 和 renderTriggered：这两个钩子是在渲染过程中触发的，前者在跟踪渲染时触发，后者在强制触发渲染时触发。

14、setup：在 Vue 3 中，组件选项 API 被 Composition API 替代。setup 函数是 Composition API 的入口点，用于组织和复用组件逻辑。它是一个新的、更强大、更灵活的方式来定义组件选项。

以上就是 Vue 3 的生命周期钩子函数。需要注意的是，由于 Vue 3 对底层进行了大量优化，一些旧的钩子函数（如 init、ready 等）已被移除或合并到其他钩子函数中。同时，Vue 3 也新增了一些用于优化性能和错误处理的钩子函数，如 activated、deactivated、errorCaptured 等。

小二CMS介绍

我们立足合肥，业务覆盖安徽、全国及全球市场。我们凭借一支经验丰富、富有创意、协作无间的专业技术团队，专注于将前沿技术通过高效简捷的途径呈现给客户，量身打造优质解决方案。我们致力于通过持续努力，成为客户在信息化领域值得托付、共创价值的长期战略合作伙伴，协助客户在新经济时代敏锐捕捉商机，拓展发展空间，构筑强大竞争力。小二CMS专注企业数字化转型的智能建站与营销系统，提供从官网搭建、品牌推广到运营增长的一站式服务，助力中小企业低门槛拥有专业级互联网阵地。

网站建设 移动相关开发 营销推广与优化 域名主机邮箱 产品与技术 企业服务

了解全部业务

扫码咨询 · 关注微信