六、【Vue3】——Vue3生命周期有哪些不同

最新推荐文章于 2025-04-05 11:28:27 发布
最新推荐文章于 2025-04-05 11:28:27 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： Vue3 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yifei1234567/article/details/123975970
版权
Vue3生命周期在设计上有所优化，包括部分钩子名称变更，如`beforeCreate`改名为`onBeforeMount`，`created`改名为`onMounted`。Vue3引入了组合式API，允许开发者以新的方式使用生命周期钩子。在同一个组件中，配置项形式和组合式API的生命周期钩子可以共存，但在更新时，组合式API的钩子会先执行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue3生命周期与Vue2基本相同，都可以通过配置项去使用生命周期钩子，但流程设计上有了一些区别，一些钩子名称发生了变化，并且Vue3可以通过组合式API形式去使用生命组件钩子，下面与小编一起探讨一下吧。

一、生命周期流程设计上一些区别

1. Vue3生命周期流程设计优化

Vue2生命周期图示 Vue3生命周期图示

 

  1. Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

    • beforeDestroy改名为 beforeUnmount
    • destroyed改名为 unmounted

  2. 仔细观察两个流程图头部可以看出，Vue3先将el挂载了之后再进行的beforeCreate,而Vue2是created之后进行判断

最低0.47元/天 解锁文章
Vue2.0与Vue3.0中生命周期函数对比
lixiaosenlin的专栏
09-27 2310
前言 做前端（尤其是Vue技术栈）的同学应该都知道，vue3.0已经来很长一段时间了，虽然现在市面上用vue3的人还不多，但是随着技术的不断发展，相信vue3取代vue2也是迟早的事。所以不管现在是否用得到，3.0的一些知识还是有必要学起来的。 下面就从最基本的生命周期（钩子）函数开始对vue2.0和vue3.0进行一个简单的梳理和对比 Vue2.0生命周期函数 我们知道在2.0版本中主要有8个比较的生命周期函数，另外还有2个跟keep-alive组件相关的，下面我们就分别对每个函数做一下简单的介绍
【前端开发——vue3】学习笔记（2）——watch、生命周期、自定义Hooks、路由等
风铃子加油的博客
05-24 1281
结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子。定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。都能监听响应式数据的变化，不同的是监听数据变化的方式不同。定义的【基本类型】数据：直接写数据名即可，监视的是其。是【对象类型】，可直接编，也可写成函数，建议写成函数。
vue2、vue3生命周期详解以及对比
夜空孤狼啸的博客
07-31 2645
div class="child">child组件--{{num}}下面借用官网的一张图介绍vue3 的生命周期，应该会更加详细把。销毁 ---- 在元素被销毁之前立即执行。更新 ---- 当响应数据被修改时执行。挂载 ---- DOM被挂载时执行。创建 ---- 在组建创建时执行。eg:可以运行一下查看执行顺序。'app组件创建前''app组件创建后''app组件挂载前''app组件挂载后''app组件更新前''app组件更新后''app组件销毁前''app组件销毁后'
Vue 3 生命周期钩子详解
最新发布
mathematicians的博客
04-05 1268
Vue 组件的生命周期指的是一个 Vue 实例从创建到销毁的整个过程。在这个过程中，Vue 提供了一系列的"钩子"（hooks），允许开发者在特定阶段插入自己的代码，实现特定的功能。Vue 3 虽然引入了 Composition API，但依然保留了选项式 API 中的生命周期概念，只是部分钩子名称有所变化。
第七章、Vue3中生命周期的变化
weixin_42321326的博客
02-05 354
第七章、Vue3中生命周期的变化
vue3的生命周期钩子与vue2生命周期对比理解
pz1021的博客
03-01 984
生命周期更新 对于vue的生命周期想必大家都非熟悉,在项目中非常常用 生命周期:伴随着生命周期，给用户使用的函数，操控生命周期，主要是操控钩子函数。 vue3的生命周期 setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method onBeforeMount() : 组件挂载到节点上之前执行的函数。 onMounted() : 组件挂载完成后执行的函数。 onBeforeUpdate(): 组件更新之前执行的函数。 onUpdated(): 组
vue2和vue3生命四种周期函数的比较（详细讲解）
2301_78646673的博客
12-24 2808
vue组件实例在创建时要经历一系列的初始化步骤，在这个过程中vue会在合适的时刻，调用特定的函数，从而让开发者有机会在特定的阶段运行自己的代码，这些特定的函数称为：生命周期函数生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁。每个阶段都有两个钩子，一前一后。vue3中“创建”只有一个函数了，并且要用到的生命周期函数都要自己先进行引入才能使用。常用的生命周期函数也就：onMounted(挂载完毕)onUpdated(更新完毕)onBeforeUnmount(卸载完毕)
vue3+ts (源码+笔记+生命周期截图)
02-14
7. ** 生命周期钩子的改变**：Vue3 中生命周期钩子发生了变化，如 `beforeCreate` 和 `created` 合并为 `onBeforeMount`，`beforeDestroy` 和 `destroyed` 合并为 `onBeforeUnmount` 等。此外，还新增了一些生命周期...
vue3.0——生命周期
kk2442687723的博客
09-23 5327
在组件化的框架中，比如Angular、React或Vue，都为组件定义了生命周期这个概念，每个组件实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时，在这个过程中也会运行一些叫做生命周期钩子的函数，它们提供给用户在组件的不同阶段添加自己的代码的机会。 使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了，因为在实际的开发过程中我们多多少少会用到他们，比如 created、mounted、destoryed等等。而在Vue3
Vue3基础（3）——组件生命周期、watch、组件之间数据共享
SongD1114的博客
04-08 1548
Vue3.0 组件生命周期、watch、组件之间数据共享
一起来聊聊Vue3的这“一生（生命周期）”
李公子的博客
08-20 1930
什么是生命周期： vue中每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。 vue2和vue3中生命周期的对比： 对Vue2生命周期不熟悉的同学可以看我的另一篇文章Vue2的生命周期 Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名： beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted ...
读懂vue3的生命周期
一只小松鼠_的博客
02-26 1816
在Vue3中，一些常见的钩子函数发生了变化。例如，vue2中的created和beforeCreate钩子函数被替换为了setup()，并且setup()在二者之前执行。beforeMount和mounted函数被替换成了onBeforeMount和onMounted。beforeUpdate 和update被替换为 onBeforeUpdate和onupdate。beforeDestroy和destroyed被替换为beforeUnmount和unmounted。这些钩子函数的执行顺序与Vue2的版本相同
vue使用总结（3）生命周期篇
pro_monkeyking的博客
09-17 526
工作之初使用的angularjs框架，从那时开始数据双向绑定的思想就深深的吸引了我。那是刚入门并没有深究angularjs实现双向绑定的原理。所以至今对angularjs也是一知半解。在工作半年左右接触了vue，开始使用它作为主要的开发框架。使用至今已有两年多了，期间也对其源码进行过研究。vue的各种理念也都比较了解。最近有空总结下自己对vue各个知识点的理解。 vue生命周期示例图 上图...
vue3生命周期_学习vue3系列生命周期
weixin_32884263的博客
01-05 569
之前已经介绍了 vue3 的相关知识点：ref，reactive，computed，watch，watchEffect，toRef，toRefs 这些响应式的API，相信大家对 vue3 已经有一定的理解了。生命周期除了这些函数 vue3 还增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子：与 2.x 版本生命周期相对应的组合式 API。1、beforeCreat...
vue3.0组合式API生命周期函数和选项式API的区别
m0_72919073的博客
11-19 825
vue3.0组合式API生命周期函数和选项式API的区别
vue3生命周期图示
m0_50789201的博客
06-04 1786
与vue2生命周期相比，vue2使用了组合式API，并且在执行时，vue3的生命周期钩子要早于vue2.
【vue3系列】vue3之生命周期(带图)
热门推荐
qq_42445025的博客
12-16 6万+
Vue3之生命周期 主要Vue生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue应用程序中有4个主要事件(8个钩子)： 创建 ---- 在组建创建时执行 挂载 ---- DOM被挂载时执行 更新 ---- 当响应数据被修改时执行 销毁 ---- 在元素被销毁之前立即执行 在【options API】中，生命周期钩子是被暴露在vue实例上的选项，我们只需要调用使用即可。 在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。 import {onMounted
Vue---Vue2/Vue3生命周期总结
COCOLI_BK的博客
06-24 941
Vue2/Vue3生命周期总结！！！
8.0 vue3生命周期
本以为成功很简单，没想到活成普通人都需拼尽全力！
01-09 1291
上一篇：vue3 watchEffect函数https://blog.csdn.net/qq_42543244/article/details/122291727 记录vue3的生命周期,于vue2相比，变化并不算很大，最大的变化是，组合式的开发，意味着如果需要在某个生命周期中写点代码，那么前提是必须引入，然后叫法单词上发生的一些变化，先看官网给出的周期图： vue2： vue3: 然后有两种写法，为了能更好的呈现出来，我就直接贴代码了： 父组件（因为生命周期中有卸载前，已卸载的周..
vue3和vue2生命周期
02-16
### Vue3 和 Vue2 生命周期钩子的区别 在 Vue 中，生命周期钩子允许开发者在组件的不同阶段执行特定逻辑。Vue3 对这些钩子进行了调整和优化。 #### 命名变化 Vue3 修改了一些钩子的名字以便更清晰地表达其作用时间点。例如，在 Vue2 中 `beforeDestroy` 被重命名为 `onBeforeUnmount`[^1]。这种命名方式使得钩子的功能更加直观易懂。 #### 新增组合式 API (Composition API) Vue3 引入了 Composition API，它提供了一种新的编写逻辑的方式——通过函数来组织代码而不是依赖选项式的配置对象。这不仅增强了灵活性还提高了代码复用性。对于生命周期来说，这意味着可以在 setup 函数内部使用类似于 `onMounted`, `onUpdated` 这样的新方法替代旧版本中的对应钩子。 ```javascript // Vue 2.x style export default { mounted() { console.log('Component has been mounted'); } } // Vue 3.x with Composition API import { onMounted } from 'vue'; export default { setup() { onMounted(() => { console.log('Component has been mounted'); }); return {}; } } ``` #### 移除或废弃某些钩子 随着 Composition API 的引入以及框架本身的改进，部分原有的生命周期钩子变得不再必要而被移除或是标记为过时。比如 `beforeCreate` 和 `created` 在很多场景下可以直接由 setup 方法代替处理初始化工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值