Vue3是什么？它比Vue2好在哪？对新手友好吗？

terry 6小时前阅读数 100 #Vue

文章标签 Vue3 Vue2对比

如果你是刚开始接触前端开发,或者已经在Vue2里摸爬滚打一两年，最近肯定刷到过不少关于Vue3的讨论——有人说它是“跨时代的框架重构”，有人吐槽“Composition API太复杂不想学”，还有培训机构直接把Vue3设为入门必修，那今天咱们就好好唠唠，从实际开发和学习的角度，把这三个最核心的问题说透。

先搞清楚最基础的：Vue3到底是个啥？

简单说,Vue3是Vue.js这个渐进式JavaScript框架的第三个大版本，是尤雨溪团队在2020年9月推出来的正式版，到现在已经更新到3.4+，生态也完全成熟了，这里面有个关键词“渐进式”，不管你是做个简单的单页静态网站、稍微复杂点的电商详情页模块，还是要搞企业级的后台管理系统、多端适配的小程序/APP，Vue3都能“按需加载、按需组合”，不会像有些重型框架那样，一上来就给你塞一堆用不上的东西。

可能你之前听说过,Vue3是“完全用TypeScript重写”的，这句话对，但也不全对，Vue3的核心运行时、响应式系统这些底层逻辑是用纯TypeScript实现的，但它的编译器和部分工具库还是保留了一些Vue2时期的优化逻辑，同时也兼容JavaScript代码——这意味着哪怕你之前连TS的边都没沾过，照样能用纯JS写Vue3项目，不用有任何技术负担。

别被“重构”吓到，看看Vue3到底比Vue2强在哪？

很多Vue2老粉一开始不愿意转Vue3,是觉得“我用Vue2写得好好的，为啥要费力气学新东西”，但如果你深入用过这两个版本，会发现Vue3的提升是从“根上”来的，不只是加了几个新API那么简单。

核心性能提升：快了不止一点点

不管是用户体验还是开发调试,性能都是前端框架的硬指标，Vue3在这方面做的优化，肉眼可见的地方可能不明显，但实际跑起来差距能拉得很大：

重写了虚拟DOM（Virtual DOM）的算法：Vue2的时候，虚拟DOM是全量对比的——不管是哪个组件、哪个节点变化，都会把整个组件的虚拟节点树扫一遍，Vue3引入了“静态提升”“Patch Flags（补丁标记）”“缓存事件处理函数”这几个核心优化，编译的时候就会给每个动态节点打上标记，只对比这些标记过的节点，对比速度能提升3倍以上，比如你写了一个页面，上面有100个静态的图片、文字，只有1个输入框的内容是动态的，Vue2会扫101个节点，Vue3只扫那1个输入框。
响应式系统升级：Vue2用的是Object.defineProperty()来实现数据响应式，这个方法有两个硬伤——一是只能监听对象已有的属性，新增或删除属性的时候，得用$set、$delete这种额外的方法；二是没办法直接监听数组索引的变化和数组长度的变化，虽然Vue2内部做了数组方法的重写，但有时候还是会踩坑，Vue3换成了ES6的Proxy（代理）和Reflect（反射）来做响应式，不仅能监听对象的新增、删除属性，还能监听数组索引、Map、Set这些ES6新数据结构的变化，完全不需要额外的API，代码写起来更顺，响应式覆盖也更全面。
打包体积更小：Vue3采用了Tree Shaking（摇树优化）的架构设计，把很多不是必须的功能（比如keep-alive、transition组件、v-model的自定义修饰符逻辑）都拆成了独立的模块，只有当你在项目里用到的时候，才会被打包进去，官方数据显示，Vue3的核心运行时代码压缩后只有13KB，比Vue2的核心代码小了41%，对于移动端这种对打包体积敏感的场景来说，这是个巨大的优势。

开发体验升级：让复杂逻辑变得好写、好维护

如果说性能提升是给用户和浏览器看的,那开发体验升级就是给咱们程序员看的，Vue3最受争议但也最受好评的，就是新增的Composition API（组合式API）——很多新手或者习惯了Vue2 Options API（选项式API）的老开发者，一开始会觉得“把data、methods、computed这些分开写不好吗，怎么混到一块了”，但当你写一个稍微复杂点的组件（比如要处理用户登录、个人信息修改、商品收藏、购物车添加这四五个关联功能的个人中心页），就会发现Options API的问题：每个功能的代码会被拆得七零八落，要找一个功能的逻辑，得在data里找数据，在methods里找方法，在computed里找计算属性，在watch里找监听逻辑，来回切换得累死。

Composition API就是为了解决这个问题而生的，它允许你把同一个功能的所有代码（数据、方法、计算属性、监听逻辑）都放在一个函数或者一个独立的文件里，比如你可以写一个useLogin()函数，专门处理用户登录的逻辑；写一个useCart()函数，专门处理购物车的逻辑，然后在组件里直接引入这两个函数，整个组件的逻辑就会非常清晰，维护起来也更方便，甚至可以把这些函数抽成公共的hooks（钩子函数），在多个组件里复用——这一点比Vue2的mixin（混入）强太多了，mixin很容易出现命名冲突，而且来源不明确，调试起来特别麻烦，Composition API的hooks完全没有这些问题。

除了Composition API，Vue3还加了很多小的开发体验优化：