vue3 和 vue2 区别,面试简答

Vue3带来了显著的性能提升,包括41%的打包大小减少、55%的初次渲染速度加快和133%的更新速度提升。主要改进在于采用Composition API实现按需导入,提升了treeshaking效果,并全面支持typescript。Vue3的响应式API从Object.defineProperty改为使用Proxy,解决了Vue2中的一些限制。然而,代码风格的变化可能对代码整洁度和维护性带来挑战。Vue3的全面typescript支持和新的响应式机制为开发者提供了更强大的工具,但也需要适应新的编码习惯。

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

vue3 出来之后,不管是什么样的公司,不管是想体验新技术也好还是跟风也好(个人觉得跟风比重更大),只要是新开项目大都会选择 vue3,紧随而来的 vue3 和 vue2 的区别肯定是要了解。

性能提升

有一些官方数据,只是我没找到是哪里出来的:

  • 打包大小减少 41%
  • 初次渲染快 55%
  • 更新速度快 133%
  • 内存使用减少 54%

主要就是重写虚拟 dom 和 tree shaking 的优化(使用了 composition api)。

Composition API(组合式 API)

以前只要你用了 vue,不管你用没用那些 api,都还是整个引入 vue,比如没用生命周期 update,但是这个属性还是存在引入的,使用了 composition api,按需导入,更好的支持了 tree shaking。
还有一点是更好的把相关功能合并在一块,有一张图片很直观的表示:
在这里插入图片描述

全面支持 typescript

整个 vue3 全部是 typescript 编写,开发工具 vscode 也已经有了各种插件支持整个 typescript 的开发。

响应式api改变

vue2使用的是Object.definepropert:

  • 必须递归监听所有属性,新增属性无法监听($set)
  • 数组下标和长度变化无法监听(采用对数据进行劫持 结合发布订阅模式来实现)
  • 兼容性好

vue3使用Proxy:

  • 懒监听,只监听第一层,当你调用到才监听之后的数据(赋值的时候obj.a = 2,obj.a会先get获取)
  • 新增属性和数组新增修改可以直接监听
  • 不兼容IE11

这是几个比较大的改变,其他小改变就很多了,比如新增了组件,api使用的改变,做了很多优化,v-if和v-for的优先级,dom diff算法优化等。

说说代码风格的体验吧,有点太放飞了。以前固定好数据写在data里面,方法写在methods里面,现在说是按逻辑组成代码块,如果代码没有一点洁癖的人,维护性是一个灾难。按逻辑分类的效果也没有达到预期,因为总有一些数据是横跨在各个分类的。

欢迎关注个人订阅号 coding个人笔记

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值