vue3的生命周期有哪些

2024-03-08 20:01:37
摘要:Vue 3 引入了新的生命周期钩子函数,并对一些旧的钩子函数进行了重构或删除。以下是一些 Vue 3 的生命周期钩子函数

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 等。

你觉得这篇文章怎么样?

35 0
本文标签: vue3生命周期

我们立足于合肥面向安徽乃至全国全球市场,我们拥有一支经验丰富、创意独到、团结协作的专业技术团队。我们立志把最好的技术通过最有效、最简单的方式提供给客户,为客户提供最佳的解决方案,我们将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,帮助客户在新经济时代下,把握商机和发展空间,并获得绝对的竞争力!我们专注于高端网站定制、系统开发、商城开发、外贸网站建设、公众号开发、小程序开发、网站优化推广、安全运维等技术领域。是高端定制网站领域著名服务商!

扫描二维码与小二CMS创始人沟通

7*24小时为您服务

小二CMS专注于高端网站定制、系统开发、商城开发、外贸网站建设、公众号开发、小程序开发、网站优化推广、安全运维等技术领域。是高端定制网站领域著名服务商!

本文标题:vue3的生命周期有哪些
免责声明:文章《vue3的生命周期有哪些》来至网络,文章表达观点不代表本站观点,文章版权属于原作者所有,若有侵权,请联系本站站长处理!
—— 小二CMS创始人微信 ——
关于我们

小二CMS专注于高端网站建设服务及定制,拥有丰富的企业网站建站经验。 近年来制作并完成了许多网站建设案例,企业品牌官网、营销型网站的建设、B2C网上商城系统开发、行业门户网站等平台开发,我们还提供了网站的策划、设计、开发、布署、安全等一站式专业的网站建设解决方案。小二CMS致力于研发国内最专业、功能最强大,扩展性能最自由灵活的高端行业通用的网站系统。我们做的不仅仅是网站系统,更多的是成就您的成功!

我们的优势

十年建站服务经验
服务1800家企业
资深行业分析策划
前沿视觉设计、研发能力
前端代码深度符合SEO优化
千家成功案例

独家源码出售
具有完备的项目管理
完善的售后服务体系
深厚的网络运营经验
时刻新技术领先研发能力
方便二次开发

我们的不同

我们是一个年轻且富有激情的团队,我们沉迷于代码并陶醉在设计之中。我们非设计,不生活;无兄弟,不编程!可年轻并不意味着没有经验。团队成员均来自各顶尖设计公司及软件公司,我们对网站设计及开发驾轻就熟,有着数百个成功案例。我们坚信用心服务,用实力说话!我们的使命:通过我们的努力,让技术改变命运!我们的宗旨:客户第一,品质至上!我们的信念:唯有客户的成功,才是我们的成功!

不忘初心,方得始终
中高端网站定制开发服务商
与我们取得联系

好作品自己会说话,

我们敬畏您给予的点滴信任 !

期待携手合作,请立即咨询我们:
QQ咨询 微信咨询
我们用心,期待您成为我们的客户

微信号:
添加微信好友, 详细咨询相关信息。

复制并跳转微信
19810950281