盘点vue3的各种生命周期

425 ℃

Vue3对生命周期钩子函数进行了重大的改动和优化,引入了一些新的钩子函数,同时对一些旧的钩子函数进行了重构或删除。下面web建站小编给大家简单介绍一下vue3的各种生命周期!

盘点vue3的各种生命周期

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组件的一些常用生命周期钩子函数介绍

Vue每个生命周期的作用?

如何在Vue3中使用watch监控一个对象的属性值

Vue3怎么运用pinia状态管理工具

Vue3中文官网介绍

标签: vue3语法, Vue生命周期

上面是“盘点vue3的各种生命周期”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_14288.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

Nginx中如何实现HTTP缓存优化
php语法利用mysql语法获取指定分类下的文章
vue项目如何实现标题闪烁通知效果(附带声音提示)
帝国cms功能之网站管理系统操作日志管理帮助
vue项目开发如何引入jquery