Vue 3.0 性能提升主要是通过哪几方面体现的?

1、响应式系统升级
 Vue2响应式原理使用的是 defineProperty,在初始化的时候会遍历所有成员,通过 defineProperty,把对象属性转换成get/set,如果data中的属性又是对象的话需要递归处理每一个子对象的属性,这些都是在初始化的时候执行的,也就是说对于一些未使用到的属性也进行了响应式处理。
Vue3响应式原理使用的是proxy对象,proxy的性能本身就要比 defineProperty好,另外,代理对象可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍 历所有的属性,如果有多层属性嵌套的话,只有访问某个属性的时候,才会递归处理下级属性,使用proxy对象,默认就可以监听到动态添加的属性,而Vue2想要动态添加响应式属性,需要调用Vue.set()方法来处理,而且Vue2中还监听不到属性的删除,对数组的索引和length属性也监听不到,Vue3中使用proxy代理对象可以监听属性的删除以及数组的索引和length属性的操作,所以Vue3使用Proxy提升了响应式系统的性能和功能
2、编译优化
Vue2通过标记静态根节点,优化diff的过程,但是在这个过程中静态节点还需要再diff,这个过程没有被优化
Vue3为了提高性能,在编译的时候会标记和提升所有的静态节点,diff的时候只需要对比动态节点的内容。在Vue3中新引入Fragments,也就是片段的特性,模板中不需要再创建唯一的根节点,可以直接放文本内容和很多同级的标签,在vcCode中需要升级vetur插件,否则模板中没有唯一根节点,vscode一会提示有错误
3、源码体积优化
 Vue3中移除了一些不常用的API,例如:inline-template、filter等,可以让代码体积变小,对Tree-shaking支持更好

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值