开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情
vue2 -- vue3 的升级 可以拆分成几个方面，我们可以从这几点开分析， 响应式、DIFF、语法（API）、新增特性、生态， 下面咱们就先逐一查看他都更新了哪些东西， 不过有一些是 破坏式更新，咱们可以留到最后一起搞他
响应式
从 vue2 到 vue3 他的响应式系统做了很大的更改， 让我们先回忆一下 vue2的 响应式系统依赖于什么，以及他的缺点
-
vue2 的响应式 vue2 的响应式 主要依赖于
Object.defineProperty，进行数据代理和数据劫持， 起特点无非就是 只能侦听对象的，不能侦听数组的， 后续也无法侦听对象的新增属性，对于深层对象还需要递归遍历，所以我们在控制台打印的时候能够看到很深的层级。- 缺点
- 无法侦听到对象的新增或删除
- 无法侦听到数组下标修改和 长度变化（入侵了数组的原型链）
data中的数据 每次实例化的时候，vue 都会进行数据双向的 mvvm 绑定， data 中的数据越多，则性能消耗越大- 非扁平对象要进行深度遍历
-
vue3 的响应式 vue3 的响应式 使用了 ES6 的
Proxy来进行，称之为 代理 ,Proxy的使用我们就不在这里做过多的复数了，代理关系上想要理解还是要自己手动敲一敲，代理对象和原对象之间的关系，以及 setter 和 getter 当中，最后一个参数的意义，这里我们主要来看一下他升级上来 带来了哪些改变？- 特性
- 不需要深度遍历
- 可以侦听对象的 新增和删除
- 可以侦听数组
diff
-
diff 是什么？ 简单diff对我们前端来讲 可以这么理解： 用来计算两组子节点的差异， 新旧
vonde进行比对，最大程度的复用DOM元素，通过lastIndex的概念和 遍历，查找是否 新增和移除 元素，调用patch函数进行打补丁 以及unmount函数卸载。- 其实最重要的就是最大的复用 DOM 元素的能力， 首先来讲我们的 js 操作浏览器的 DOM 是会消耗性能的， 这方面的性能损耗如何呢？
我们可以通过下面的导图看一下 以前很多的 命令式框架 jQquery 和我们现在用的 声明式框架 Vue 来进行一下比对：
从这里我们可以看到， 在性能消耗上来讲，命令式更优，但是随着互联网的发展，我们的 web 页面不论是从系统，还是交互性或UI 上来讲，都是越来越复杂，代码量也越来越大，可维护性便是针对程序员的后续迭代或更新来进行的。这也是为什么 不论是 vue（快速diff） 还是 react（fiber）都在 diff 的 道路上不断精进。
说到这里，在说回 vue 的 diff， vue 的 diff 从 v2 升级到 v3 可以说是做了很大的提升， 首先是基于上面我们的代理这一点， 提升了一部分性能， 配合最新的 diff 还能够再次提升一些性能，当然具体提升的数值，对于我们开发者来说，但从这两点上来讲，可能还不是很明显，因为这种提升往往 都是 ms 级别的。
vue2 主要使用双端 diff ， vue3 借鉴并扩展了 快速 diff
- 下面就先通过下面的一个小图图，先来简单了解一下版本不同 对 diff 使用上的区别吧 😋
- 前端面试的时候，经常会被问到 diff， 那么我们可以如上回答， vue2 和 vue3 使用的 一个是 双端 diff 一个是 快读 diff， 光这一点可能你的答案就已经和大部分不一样了，如果再把这两个种diff的原理浅浅的说一下，则无忧矣。
- 后话： 面试的时候还偶尔会被问及 key， 如果说到 key 那就不得不说 diff， key 是 diff 当中的关键一环， 但比对key 也是有优先级的，如 节点属性（type），class 类型，在 vue3 当中更新的话 还比 vue2 多了一个 节点的标记和提升， diff 的时候只会比对动态节点内容， vue3 同时还在 vnode 上增加了 Patch flag ， 标记节点类型 我们可以通过下图 简单了解一下 key 在 diff 中的作用：
