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专注于高端网站定制、系统开发、商城开发、外贸网站建设、公众号开发、小程序开发、网站优化推广、安全运维等技术领域。是高端定制网站领域著名服务商!
上一篇: 修改DNS解决个别网站无法访问的问题
下一篇: 云计算服务器包括哪些
在智能家居从概念走向现实的今天,消费者对"全屋智能"的期待已从科幻电影中的场景,转化为对便捷、舒适、个性化居住体验的切实需求。
在微信生态中构建网站已成为企业品牌展示、用户运营与商业转化的核心场景。区别于传统网站,微信网站需深度适配微信的交互逻辑与功能接口,实现从流量获取到用户沉淀的闭环。
在移动互联网迅猛发展的当下,微信作为一款拥有庞大用户群体的超级应用,不仅改变了人们的社交方式,也深刻影响了商业运营模式。
在数字化浪潮席卷的今天,一个专业、高效且符合企业特色的网站已成为企业展示形象、拓展业务、提升竞争力的关键窗口。
在人工智能(AI)技术以迅猛之势席卷各个领域的当下,一个疑问悄然浮现:网站是否会被AI工具替代?
在用户注意力碎片化、搜索引擎排名与加载速度强关联的今天,网站访问速度已成为影响用户体验、转化率及SEO效果的核心指标。
在搜索引擎流量成本持续攀升的背景下,企业SEO投入与产出比成为核心关注点。SEO关键词排名收费模式已从传统的“按词计费”向“效果导向+技术赋能”转型
在数字化竞争白热化的今天,企业网站已从“信息展示窗口”升级为“品牌价值载体”与“用户转化引擎”。