Vue3对比Vue2的优点总结
1.为什么要有vue3
我们使用vue2常常会遇到一些体验不太好的地方，比如：
- 随着功能的增长，需求的增加，复杂组件的代码越来越难以维护，逻辑混乱，虽然vue2也有一些复用的方法，但是都存在一定的弊端，比如我们常常用的mixin,特别容易发生命名冲突，暴露出来的变量意图不是很明显，重用到其他组件容易冲突。
- vue2对于typescript的支持非常有限，没有考虑到ts的集成。
vue3的出现就是为了解决vue2的弊端，其composition api很好的解决了逻辑复用的问题，而且vue3源码就是用ts写的，对ts的支持非常好。我们在开发项目过程中可以使用ts的加持，使代码更加健壮。
2.vue3的优点
- vue3支持vue2的大多数特性，实现对vue2的兼容
- vue3对比vue2具有明显的性能提升
- 打包大小减少41%
- 初次渲染快55%，更新快133%
- 内存使用减少54%
- vue3具有的composition api实现逻辑模块化和重用
- 增加了新特性，如teleport组件，全局api的修改和优化等
3.响应式原理的不同
vue2.x实现双向数据绑定原理，是通过es5的 object.defineproperty，根据具体的key去读取和修改。其中的setter方法来实现数据劫持的，getter实现数据的修改。但是必须先知道想要拦截和修改的key是什么，所以vue2对于新增的属性无能为力，比如无法监听属性的添加和删除、数组索引和长度的变更，vue2的解决方法是使用vue.set(object, propertyname, value) 等方法向嵌套对象添加响应式。
vue3.x使用了es2015的更快的原生proxy 替代 object.defineproperty。proxy可以理解成，在对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。proxy可以直接监听对象而非属性，并返回一个新对象，具有更好的响应式支持
4.生命周期的不同
beforecreate -> 请使用 setup()
created -> 请使用 setup()
beforemount -> onbeforemount
mounted -> onmounted
beforeupdate -> onbeforeupdate
updated -> onupdated
beforedestroy -> onbeforeunmount
destroyed -> onunmounted
errorcaptured -> onerrorcaptured
如果要想在页面中使用生命周期函数，以往vue2的操作是直接在页面中写入生命周期，而vue3是需要去引用的，这就是为什么3能够将代码压缩到更低的原因
5.默认项目目录结构的不同
vue3移除了配置文件目录，config 和 build 文件夹，移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中，在 src 文件夹中新增了 views 文件夹，用于分类视图组件和公共组件
6.vue3对全局api的优化
在 vue3 中，全局和内部 api 都经过了重构，并考虑到了 tree-shaking 的支持。因此，全局 api现在只能作为 es 模块构建的命名导出进行访问。
入口文件
7.使用proxy替代了defineproperty
proxy 相比于 defineproperty 的优势
object.defineproperty() 的问题主要有三个：
- 不能监听数组的变化
- 必须遍历对象的每个属性
- 必须深层遍历嵌套的对象
proxy 在 es2015 规范中被正式加入，它有以下几个特点：
- 针对对象：针对整个对象，而不是对象的某个属性，所以也就不需要对 keys 进行遍历。这解决了上述 object.defineproperty() 第二个问题
- 支持数组：proxy 不需要对数组的方法进行重载，省去了众多 hack，减少代码量等于减少了维护成本，而且标准的就是最好的。
除了上述两点之外，proxy 还拥有以下优势：
- proxy 的第二个参数可以有 13 种拦截方法，这比起 object.defineproperty() 要更加丰富
- proxy 作为新标准受到浏览器厂商的重点关注和性能优化，相比之下 object.defineproperty() 是一个已有的老方法。
8.更多资料
以上就是vue3对比vue2的优点总结的详细内容，更多关于vue3对比vue2的优点的资料请关注其它相关文章！