开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 29 天，点击查看活动详情

vue3相对于vue2做了哪些优化？

我们可以从以下2个层面来讲解。

一、设计目标

更小、更快、更友好。 其实在vue3组合式API官网也有介绍，vue3有什么特点：

1. 代码更灵活。

相比vue2以前需要把不同的代码写在不同的key里。比如方法要写在methods里，注册组件写在components里，使代码不够灵活，本来是一起的逻辑，却拆分开写了。vue3里可以把相关联部分的逻辑放在一起，维护起来更加容易。

2. 更好的复用逻辑。

以前vue2实现逻辑复用会用到mixins，还会发生命名冲突的问题。vue3里可以把需要服用的逻辑封装在一个hooks里，这样使用起来会更加简单，方便。

3. 更小的生产包体积。

vue2所有的属性方法都放在了this上，当使用时必须先找到this，而this有时又难以理解，vue3里直接使用方法即可，不再需要this。

4. 更好的类型推导。

vue3可以与TS很好的结合，vue2需要相应的插件和配置，需要大量的修饰器，这种做法对于一些人来说不是很友好。

vue3里的源码用到的一些依赖拆分的更加细化。 vue3里有一个reactibity响应式库，它是独立于vue开发的

二、优化方案

源码

• 里面的文件差分的更加细致。
• vue3内部的源码使用了ts进行编写。

性能

体积优化：不再使用this。并且内部使用了Tree sharking，该插件可以删掉那些未使用的代码，或者是无效的代码，之后再进行打包。

编译优化

1. diff算法优化。
2. 静态提升。vue2中只对静态根节点进行了标记。
3. 事件监听缓存。
4. SSR优化。

数据劫持优化

• vue2采用的是object.defineProperty。在一些属性进行操作时，使用这种返方法无法拦截，包括为对象添加没有的新属性，或删除某一个属性，以数组下标的形式更改数组，ViewModel是监听不到的，需要调用vue.$set()方法再去更改响应式数据。
• vue3采用ES6提出的proxy代理。它相当于内置了set、delete这些执行器，代理的是整个对象，而非是对象的属性，对于数组的话，在vue3内部都重写了数组的方法。

语法API

• 提出了组合式API。
• 响应式数据创建的方式也是不一样的。
• 创建对象、数组使用的是reactive
• 创建响应式变量使用ref