以后写的有关 vue3 的该文，好些人聊著：这些API每天使用都要导入两遍，觉得有点儿麻烦事。

那时他们就来看一看 vue3 较之 vue2 的缺点很多啥？

咋很多人说：好景不长写了 ts vue3 非但回不出 vue2 啦！

vue3 究竟这儿好？有的是人回不出 vue2，而有的是人去没法vue3！讨厌的雅雷珍藏，TRAP不误入！

一、Vue3 追加的几个看点：

Performance：操控性强化Tree-shaking ：全力支持摇树强化Composition API ：组合式api追加模块：Fragment、Teleport、Supense更快地全力支持 tsCustom Render API：自订图形库

二、操控性各方面的提升

在操控性各方面，vue3 较之 vue2 ，操控性提高了 1.3 ~ 2 倍左右。他们就来看一看它是在四各方面，如何提高的？

2.1、积极响应式操控性提高

1> diff方式强化

diff 演算法是交互式 DOM 技术的必然乙醛，它会对旧有 DOM 展开较为，接着将变动的 DOM 预览在真实世界的 DOM 上。

在 vue2 中，统计数据出现变动的这时候，会聚合两个捷伊 DOM 树，接着和以后的 DOM 树展开较为，找出不同的结点接着预览到真实世界的 DOM 上，较为的过程中，会对没有出现出现改变的 DOM 也单厢展开较为，就会耗用一定的时间。

在 vue3 中，在建立交互式 DOM 的这时候，会根据 DOM 中的文本加进两个静态记号，在数据出现出现改变的这时候，就会带着静态记号的结点去对照，能加速找出变动的 DOM 。

2> 该事件侦听器内存

预设情况下onClick会被视作静态存取，因此每天单厢跟踪它的变动

但是因为是同一表达式，因此不必跟踪变化，直接内存起来F83E43Se方可

3> ssr渲染

当存在大量静态文本时，这些文本会被当做纯字符串推进两个 buffer 内，即使存在静态存取，也会通过模板插值潜入进去，这样会比交互式 DOM 渲染快得多。

2.2、代码体积各方面

打包大小减少41%。

vue3 移除了一些不常用的 API，如：inline-template、filter 等，使用 tree-shaking。

Tree Shaking 摇树强化，指的就是当他们导入两个模块的这时候，不导入这个模块的所有代码，只导入他们需要的代码。

在 vue2 中，很多表达式都挂载到全局 Vue 对象上，如：nextTick、set 表达式等，虽然他们不常用，但打包时只要导入 Vue 这些全局表达式会打包进 bundle 中。而 vue3 中，导入tree-shaking，所有的是 API 都通过 ES6 模块化的方式导入，这样就能让 webpack 或 rollup 等打包工具在打包时，就会自动对没有用到的 API 展开剔除，最小化 bundle 体积。

初次渲染快55%, 预览渲染快133%。模块选择了按需导入，使得打包后的体积也更小了，因此项目运行的这时候速度更快，更顺畅了！

2.3、编译被强化

1> 静态提高

在 vue2 中，无论元素是否参与预览，每天单厢重新建立接着再渲染。

vue3 使用静态提高后，对于不参与预览的元素，只会被建立一次，在渲染时直接F83E43Se就好了。

2> Fragment

模板内不必再建立两个唯一根结点，可以直接放同级标签和文本。就相当于少了两个结点嵌套渲染。

三、选项式 api VS 组合式 api

3.1、vue3 的组合式 api 相对来说，更有利于维护和封装。

3.2、组合式 api 高内聚，低耦合。

在 vue2 中采用选项式 api ，会在 vue 文件的 data、methods、watch、computed 中定义属性和方式，共同处理页面逻辑，多个功能相互交叉，缠绕在一起，代码过于分散。

而 vue3 追加了组合式 api ，两个功能模块代码会集中到一起，实现高内聚，低耦合。提高代码的可读性和可维护性，基于表达式组合的 api 更快地重用逻辑代码。

组合式api 与选项式api 对照如下图：

每个颜色，都代表着两个功能。

3.3、不宜出现 DOM 元素不存在问题。

vue3 中用 setup 表达式代替了 vue2 中的 beforeCreate 和 created 。很多同学有这时候会在 created 中操作 DOM 元素，有这时候报错了，就在那纳闷看不出来问题，为了没有反应。使用 setup 之后，就不容易出现该问题了。

注意：

vue3 的组合式 api 中的 onUnmounted 代替了 vue2 中的 beforeDestory。

vue3 的组合式 api unmounted 代替了 vue2 中的 destoryed 。

四、proxy 相对 Object.defineProperty 缺点有哪些？

proxy 和 Object.defineProperty 都是来实现积极响应式统计数据的。

vue3 使用 proxy 来代替 vue2 的 Object.defineProperty 效率更高，值得学习。

1> vue2 利用 Object.defineProperty 来劫持 data 统计数据的 getter 和 setter 操作，使得 data 在被访问或赋值时，静态预览存取的 template 模板。而 Object.defineProperty 必须遍历所有的是预值才能劫持每两个属性，这一缺点正好能被 proxy 解决。

proxy 较之 Object.defineProperty 缺点分别为：

代码的执行效果更快。proxy 可以直接监听对象而不是它的属性。proxy 可以直接监听数组的每个元素的变动。proxy 不需要初始化的这时候遍历所有属性，如果有多层嵌套的话，只访问某个属性的这时候，proxy 能加速访问到，而 Object.defineProperty 还需要遍历所有属性，接着逐级向下访问。proxy 返回的是两个新对象，可以直接操作新对象而达到目标。而 Object.defineProperty 操作的是原对象，只能遍历对象属性接着对其直接修改。proxy 有 13 种拦截方式，不限于 apply、ownKeys、deleteProperty 等，而 Object.defineporperty 不具备。

2> defineProperty 无法监听对象追加属性以及无法跟踪数组索引以及数组 length 的问题，proxy 正好解决了该问题。

在 vue2 中，他们给对象追加两个属性时，如果追加属性的值出现出现改变的这时候，他们发现视图并没有预览，因为追加属性是无法监听到的。同样的，通过下标直接出现改变数组，视图也是无法预览的，也是因为监听不出。

在 vue3 中追加 proxy ，解决了这些问题。