Vue3对比Vue2有哪些变化
响应式
vue3 使用 Proxy 进行的响应式，Proxy 相比于 defineProperty 的优势，Object.defineProperty() 的问题主要有三个：
不能监听数组的变化
必须遍历对象的每个属性
必须深层遍历嵌套的对象
Proxy 在 ES2015 规范中被正式加入，它有以下几个特点：
针对对象：针对整个对象，而不是对象的某个属性，所以也就不需要对 keys 进行遍历。这解决了上述 Object.defineProperty() 第二个问题
支持数组：Proxy 不需要对数组的方法进行重载，省去了众多 hack，减少代码量等于减少了维护成本，而且标准的就是最好的。
除了上述两点之外，Proxy 还拥有以下优势： Proxy 的第二个参数可以有 13 种拦截方法，这比起 Object.defineProperty() 要更加丰富 Proxy 作为新标准受到浏览器厂商的重点关注和性能优化，相比之下 Object.defineProperty() 是一个已有的老方法。
管理方式
代码管理方式
Vue2 的核心代码在 src 目录下，使用 rollup 管理。
Vue3 使用 monorepo 管理 packages ，目录结构更清晰。
类型管理方式
Vue2 使用的 Flow,Facebook 维护的静态检查工具，已烂尾
Vue3 使用 TypeScript 重构了整个项目，拥抱 TS 生态
性能优化
源码体积优化
首先，移除一些冷门的 feature（比如 filter、inline-template 等）；
其次，引入 tree-shaking 的技术，减少打包体积。 使用 tree-shaking 的原理就是利用 ES5 的模块语法的静态结构（即 import 和 export），通过编译阶段的静态分析，找到没有引入的模块，并打上标记，然后在打包的时候，不打包这些没用到的模块，从而减少项目体积。 数据劫持优化 Vue2 使用的 Object.defineProperty 的 getter/setter 对对象的属性进行的数据劫持，但是存在一些缺点，比如对于数组的检测支持并不是很好、不能检测对象属性的添加和删除（虽然有$set和$delete，但是还有不太友好）。 Vue3 使用 Proxy，它劫持的是整个对象，对于对象属性的增加和删除都能检测到
编译优化 通过编译阶段对静态模板的分析，编译成 Block Tree，简单来说就是把每个节点都打上一个标记，然后 diff 的时候好判断是否需要更新这个节点，这是一个非常大的性能突破。
语法优化 提供 composition api，他的优点包括
优化逻辑组织（对比 OptionsAPI），将某个逻辑关注点项目的代码都放在一个函数里，减少反复横挑
逻辑复用，Vue2 需要使用 mixin 来处理，Vue3 直接使用函数复用
总结
使用 proxy 代替 getter/setter
使用 typescipt 代替 flow 管理类型
引入 tree-shaking 减少代码体积
使用 composition 组织状态
使用 monorepo 代替 rollup 管理代码
来自：https://www.zhangningle.top/articles/Vue/Vue3对比Vue2有哪些变化.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！