Vue 2和Vue 3生命周期对比

已于 2024-03-28 10:44:33 修改
阅读量209 收藏 4
点赞数 2
分类专栏： Vue 文章标签： vue.js 前端
于 2024-03-28 10:39:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dklsuntao/article/details/137102760
版权
Vue 2Vue 3
选项式API组合式API

beforeCreate

beforeCreate

created

created

beforeMount

beforeMount

onBeforeMount

mounted

mounted

onMounted

beforeUpdate

beforeUpdate

onBeforeUpdate

updated

updated

onUpdated

beforeDestroy

beforeUnmountonBeforeUnmount

destroyed

unmountedonUnmounted

Vue 3的组件可以按两种不同的风格书写：选项式 API 和组合式 API。组合式 API的生命周期钩子都是带前缀on，选项式 API 的生命周期选项和Vue 2基本相同，除了销毁/卸载的两个选项。setup() 钩子是在组件中使用组合式 API 的入口。组合式 API 中的 setup() 钩子会在所有选项式 API 钩子之前调用。

参考

最新 Vue 生命周期 V2.0 VS V3.0 对比总结

dklsuntao
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue2与Vue3的生命周期一览
道阻且长
09-26 1724
Vue2与Vue3的生命周期一览
vue2和vue3生命周期对比
DOM曼珠沙华的博客
08-18 3374
下面的是vue2和3的生命周期对比， vue2生命周期 vue3生命周期 与 2.x 版本生命周期相对应的组合式 API beforeCreate-> 使用setup() created-> 使用setup() beforeMount->onBeforeMount mounted->onMounted beforeUp...
Vue2和Vue3生命周期的对比
elevenhope的博客
02-07 2075
一、Vue生命周期 vue实例从创建到销毁的过程，具体来说就是vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染数据、更新数据、最后销毁这样的一个过程。 二、生命周期对比 Vue2生命周期 Vue3生命周期 beforeCreate setup() created setup() beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated
Vue2 与 Vue3 生命周期对比
青山不改，绿水长流。
09-22 3258
内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。这个钩子函数获取的数据是更新后的数据，生成新的虚拟dom，跟上一次的虚拟dom结构进行比较，比较出来差异（diff算法）后再渲染真实dom，当数据引发dom重新渲染的时候，在updated钩子函数里面就可以获取最新的真实dom了。vue 实例的 $el 和 data 都已初始化，dom节点马上要被渲染出来了，但是还没有真正的渲染出来,挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。
vue2与vue3生命周期函数详细对比
XSL_HR的博客
09-24 2255
vue2和vue3在生命周期钩子上的对比的详细说明 强烈推荐！！
Vue3生命周期
热门推荐
m0_57341617的博客
08-19 10万+
vue3生命周期钩子函数，vue3和vue2钩子的变化
vue2和vue3的生命周期
weixin_46084100的博客
07-17 2283
vue2和vue3生命周期
前端学习笔记（9）-Vue2和 Vue3生命周期区别
JiangZhengyang7的博客
11-23 2540
1.vue2常用生命周期： 2.Vue3中生命周期函数的修改 3.父子组件生命周期测试 3.1 初始化渲染 3.2 更新
Vue2生命周期、Vue3生命周期及其对比
码农键盘上的梦
12-01 1342
Vue2生命周期、Vue3生命周期及其对比，总结： Vue2和Vue3钩子变化不大，beforeCreate 、created 两个钩子被setup()钩子来替代。
vue3和vue2生命周期对比
前端帅小伙
06-18 1698
卸载前、卸载后换成了 beforeUnmount、unmounted; vue2 中的都能在 vue3 中使用，但 vue2 中是 options 选项， vue3 都是组合式的 api；新增两个钩子函数主要用来做调试的
vue生命周期和react生命周期对比【推荐】
10-18
本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
Vue2生命周期图解（详细）
03-31
Vue2生命周期图解（详细）
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
10-18
今天小编就为大家分享一篇对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vite+ts+mock+vue-router+pinia实现vue的路由权限
beekim的博客
05-20 346
vite.config.ts配置。
【vue嵌套iframe】实现项目重构
最新发布
qq_32768761的博客
05-21 1426
基于vue3示例页面嵌套iframe页面。适用于使用vue进行项目重构及访问第三方页面。实现vue路由与内部iframe访问地址同步变化。
vue中computed计算属性
luna_H的博客
05-19 391
4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})5.watch默认监听一层，需要监听多级如对象中的值，需要添加深度监听deep:true。4.写法：第一种Vue实例中，第二种实例化vm.$watch("监听的属性",{})写法：监听的属性名(新值,旧值){}2.被Vue实例管理的函数最好都使用普通函数，不被Vue实例管理的函数最好都使用箭头函数，1.computed能做到的watch都可以，watch能做到的computed不一定能。
四天学会JS高阶（学好vue的关键）——深入面向对象（理论+实战）（第三天）
爱游戏爱学习的博客
05-20 855
深入对象 原型对象
VueScan Pro中文
CSDN专家-微编程的博客
05-19 366
VueScan Pro中文是一款VueScan图像扫描软件,提供色彩平衡和颜色校正功能,适用于6500多台扫描仪,VueScan破解版内置驱动,可以对扫描仪软件反向工程,支持200种以上的底片类型,复杂的白色平衡算法,用于检查物体表面暇疵的红外线底片扫描,成批扫描,自动剪取图像等等,提高扫描仪的扫描速度和工作效率.
vue3和vue2的生命周期对比
08-23
Vue 3 和 Vue 2 的生命周期有一些变化和优化。下面是它们的对比： 1. 创建阶段： - Vue 2：beforeCreate -> created - Vue 3：beforeCreate -> onBeforeMount -> created -> onMounted 2. 更新阶段： - Vue 2：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值