一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。
引言
vue3.0的优势也是面试中常问的经典题，下面笔者就从以下几方面详细叙述一下vue3.0对比vue2.x的优势。
1. 使用Proxy替代Object.defineProperty
为什么使用 Proxy 替代 Object.defineProperty，简单总结Proxy的几点优势
- Proxy 是对整个对象的代理，而 Object.defineProperty 只能代理某个属性
- 对象上新增属性，Proxy 可以监听到，Object.defineProperty 不能
- 数组新增修改，Proxy 可以监听到，Object.defineProperty 不能
- 若对象内部属性要全部递归代理，Proxy 可以只在调用的时候递归，而 Object.definePropery 需要一次完成所有递归，性能比 Proxy 差
2.性能比2.x快1.2~2倍
Vue3.0性能上的提升主要体现在diff算法上的优化和静态提升：
在diff算法（增加了静态标记）：
在vue2中，虚拟dom是全量比较的，但在vue3中，增加了静态标记。在创建vnode的时候，会根据vnode的内容是否可以变化，为其添加静态标记，静态标记会根据不同的标签具有不同的值。这样在diff的时候，只需要比较静态标记变化了的节点，需要比对的内容更少了。
进行了静态提升（生成虚拟dom树的阶段）：
在vue2中，一旦检查到数据变化，就会re-render组件，所有的vnode都会重新创建一遍，形成新的vdom树。在vue3中，对于不参与更新的vnode，会做静态提升，只会被创建一次，在re-render时直接复用。
3.按需编译，体积比Vue2.x更小
引入tree-shaking 减少打包体积
在vue3中，利用 ES6 模块系统的import/export。可以进行按需引入，避免引入不必要的资源。
例如：可以如下面这样引用vue的功能函数，需要watch便引入watch，需要computed便引入computed。
import { computed， watch， nextTick } from "vue";
4.Compostion API替换Options API
在vue2的组件内，使用的是Option API风格（data/methods/mounted）来组织代码，这样会让逻辑分散。
例如：我们完成一个计数器功能，要在data里声明变量，在methods定义响应函数，在mounted里变量初始化，如果在一个功能比较多、代码量比较大的组件里，你要维护这样一个功能，就需要在data/methods/mounted反复的切换到对应位置，然后进行代码的更改。
compostion api更进一步，着力于JavaScript（逻辑）部分，将逻辑相关的代码放在一起，近而有利于代码的后期维护。
5.更好的TS支持
vue2不适合使用ts，原因在于vue2的Option API风格。options是个简单对象，而ts是一种类型系统、面向对象的语法，两者有点不匹配。在vue3中，全面拥抱ts，使组件在ts下，更好的利用参数类型推断 。
6.更快的开发体验（vite开发构建工具）
在使用webpack作为开发构建工具时，npm run dev都要等一会，项目越大等的时间越长。热重载页有几秒的延迟，但是如果用vite来做vue3的开发构建工具，npm run dev 秒开，热重载也很快。
vite的原理还是用了浏览器支持import关键字了，启动项目不用webpack构建工具先构建了，浏览器直接请求路由对应的代码文件，代理服务器针对单个文件进行编译并返回。如果请求的文件里还import了其他文件，同理浏览器继续发请求，代理服务器返回。就这样实现了npm run dev时无需编译，实时请求实时编译。
推荐
如果有想要继续学习浏览器篇的读者，可以观看笔者的另一篇文章【面试宝典】高频前端面试题之浏览器篇 - 掘金 (juejin.cn)
如果有想要继续学习CSS篇的读者，可以观看笔者的另一篇文章【面试宝典】高频前端面试题之CSS篇 - 掘金 (juejin.cn)
如果有想要继续学习Vue原理篇的读者，可以观看笔者的另一篇文章【面试宝典】高频前端面试题之Vue原理篇 - 掘金 (juejin.cn)
如果有想要继续学习JS原理篇的读者，可以观看笔者的另一篇文章【面试宝典】高频前端面试题之JavaScript原理篇 - 掘金 (juejin.cn)
如果有想要继续学习手写JS常用方法的读者，可以观看笔者的另一篇文章【面试宝典】高频前端面试题之手写常用JS方法 - 掘金 (juejin.cn)
