VUE2和VUE3的区别

  1. 数据响应式的实现不同

vue2中的数据响应式是根据Object,defineProperty实现的,使用这个方法每次只能对一个对象中的一个数据进行数据劫持,若需要将对象中的所有属性都设置为响应式的,则需要递归遍历实现深层次的监听,以此对对象中的数据进行数据劫持,在性能方面表现很差。

vue3中的数据响应式是根据proxy代理实现的,proxy的监听可以针对一整个对象,无需递归遍历,性能更好。

注:数据劫持主要通过上述监听方法中的get和set属性进行实现的

若对象中的某个属性被访问了,会在get方法中进行劫持,在get属性中,将依赖该属性的元素进行收集,统一存放到一个数组中。

当属性值发生改变了,会被set方法进行劫持,在该方法中通知所有依赖该属性的元素进行更新

从而实现数据响应式

  1. 生命周期命名不同

V3中将beforeCreat和created合并成一个setup钩子

  1. 语法API

V2使用的是选项式API,最直观的感受就是写法的局限性很大,需要按照他提供的写法进行书写,由于它的数据和逻辑分散在各个选项中,当组件的逻辑变得复杂时,很难进行维护和理解

V3使用的是组合式API,写法更加灵活,更偏向原生的写法。而且它可以将相同功能的代码编写在一起,可读性和复用性更好

  1. 复用函数

V2中一般通过mixin实现某些功能的复用,会导致命名冲突,被覆盖。

V3可以通过自定义创建一个Hook函数实现功能复用,在需要进行使用的地方调用即可,也会不出现命名冲突的问题。

相关推荐
名字还没想好☜1 分钟前
React createPortal 实战:模态框逃出 overflow:hidden、事件冒泡与焦点管理
前端·javascript·react.js·ecmascript·react·createportal
河西石头11 分钟前
再谈C#的抽象类和接口:从“适配器”到“毛坯房”的设计哲学
开发语言·c#·接口·依赖注入·抽象类·依赖倒挂
颜x小13 分钟前
[C#]——接口与继承
开发语言·c++·c#
冻柠檬飞冰走茶15 分钟前
PTA基础编程题目集 7-17 爬动的蠕虫(C语言实现)
c语言·开发语言·数据结构·算法
用户0595401744616 分钟前
Playwright测试AI记忆存储踩坑实录:这个时序问题让我排查了6小时
前端·css
咯哦哦哦哦17 分钟前
qt creator x86交叉编译arm 配置
开发语言·qt
IT_陈寒18 分钟前
Redis踩了个大坑,原来DEL命令也会卡住整个实例
前端·人工智能·后端
一个水瓶座程序猿.36 分钟前
基于Spring AI RAG 的AI知识库前端交互实现
前端·人工智能·spring
乐启国际旅行社有限公司43 分钟前
Java线程池实战:文旅系统批量任务性能优化(团期生成/数据导出)
java·开发语言·性能优化
breeze jiang1 小时前
React + TypeScript 编辑表单:为什么要区分 name 和 editingName
前端·typescript