Vue3到底改了啥？新手/转行者要不要马上学？怎么高效上手？

为什么Vue2用户突然慌着换Vue3？

别慌，其实Vue2在很多成熟项目里还能正常跑，但从长期维护和性能体验来看，换是迟早的事——2024年Vue2已经停止官方安全更新和技术支持，只剩下第三方社区的零星维护，更重要的是，现在的新组件库、开发工具、招聘需求，几乎全是围绕Vue3来的，比如Element Plus完全放弃了Vue2版的新功能，Pinia直接成了官方推荐的状态管理，Vite和Vue3的组合更是把开发体验拉满，刚学前端的话直接学Vue3绝对是正确的选择,没必要再绕回Vue2补过时的知识。

说个身边的真实例子吧，我同事半年前接手的一个老电商后台项目，一开始用Vue2+Webpack，开发启动要等3分多钟，每次热更新都得卡个5-10秒，后来花了两周时间边改边测试，换成Vue3 Composition API+Vite+Pinia，现在启动只要18秒左右，热更新基本是秒改秒看，项目上线后首屏加载速度也快了20%多——因为Vue3本身的核心包就比Vue2小了40%（开启Tree Shaking的话效果更明显），底层的响应式系统也完全重写了,性能提升是实打实的。

Vue3的核心改动到底有哪些？别再说只会Composition API了

很多人对Vue3的印象就停留在“多了个setup”或者“Composition API”，但其实Vue3的改动是从底层到上层的全方位升级,下面挑几个对日常开发影响最大的讲：

重写的响应式系统：从Object.defineProperty到Proxy

这是Vue3最核心的技术改动，没有之一，Vue2的响应式用的是Object.defineProperty，只能监听对象的已有属性，新增或者删除属性的时候需要用$set、$delete这种特殊方法，不然页面不会更新；而且数组的索引修改和长度修改也不能直接监听，只能通过重写push、pop、shift、unshift、splice、sort、reverse这7个方法来实现，虽然日常开发大部分情况够用，但遇到复杂嵌套对象或者频繁增删属性的场景，不仅代码写得麻烦，性能也会下降——因为Vue2会递归遍历整个对象，给每个属性都加上getter和setter，对象层级越深,初始化的时候就越慢。

Vue3改用Proxy和Reflect重写了响应式系统，解决了Vue2所有的响应式痛点：Proxy可以直接监听整个对象的所有操作，包括新增属性、删除属性、修改数组索引、修改数组长度，甚至可以监听Map、Set、WeakMap、WeakSet这些ES6新增的数据结构；而且Proxy是懒加载的，只有访问到某个嵌套对象的属性时，才会把它变成响应式的，初始化速度会快很多，Vue3还新增了响应式API的颗粒度控制，比如ref用来处理基本类型和单值引用，reactive用来处理对象和数组，toRef和toRefs可以把reactive对象的属性转换成独立的ref,避免解构赋值后丢失响应式。

Composition API vs Options API：怎么选？

Options API就是Vue2里大家熟悉的data、methods、computed、watch、mounted这种分块写的方式，优点是逻辑清晰，新手一眼就能知道每个部分是干嘛的，缺点是当组件变大变复杂的时候，相关的逻辑会被分散到不同的选项里——比如一个购物车组件，“添加商品”的逻辑可能涉及data里的cartList、totalPrice，methods里的addToCart、updateTotal，computed里的finalPrice，mounted里的从localStorage读取数据，这些逻辑分散在四个不同的地方，找起来特别麻烦，复用的时候也只能用mixin，而mixin有命名冲突、来源不明的问题，稍微多加几个mixin,代码就变得很难维护。

Composition API是Vue3引入的一种新的代码组织方式，核心是setup函数（Vue3.2之后可以直接用