vue3.0和vue2.0的区别对比

本文对比了Vue2.0和Vue3.0在响应式系统、模板语法、生命周期函数、setup函数、v-model使用方式以及开发模式上的区别。Vue3通过Proxy提升了响应式性能,生命周期函数有新的命名,setup函数成为核心,v-model的使用也有所变化,同时引入组合式API以增强代码可读性和逻辑复用。
摘要由CSDN通过智能技术生成

1、vue2的响应式 vs vue3的响应式 (性能提升)

响应式系统升级

  1. vue2 中的 object.defineProperty(响应式系统的核心)
初始化的时候,会遍历data中的所有成员,使用defineProperty把对象的属性转换成get和set,如果该成员中的属性还是对象的话,需要递归处理每一个子对象的属性。这些都是在初始化的时候进行的。即使你没有使用到这个属性,那么也是会将该属性进行响应式处理。
复制代码
  1. vue3 proxy
proxy的性能本身就比defineProperty要好, 另外,代理对象可以拦截属性的访问、赋值、删除等操作,不需要初始化时遍历所有的属性。另外,如果有多层属性嵌套的话,只有访问某个属性的时候,才会递归处理下一级的属性。使用proxy默认就可以监听到动态新增的属性,可以监听到删除的属性。可以监听数组的索引和length属性。
复制代码

总结: vue3使用的proxy对象提升了响应式系统的性能和功能

2、模板语法

打开App.vue文件,唯一和Vue2不同的是:Template不再强调一定要有根标签了。

3、生命周期函数对比

1)首先需要了解生命周期是什么?

Vue实例从创建到销毁的过程,就是Vue实例的生命周期。

这个过程包括数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。

2)具体函数对比

  • 6
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值