为什么 Vue3.0 要重写响应式系统

面试官： 为什么 Vue3.0 要重写响应式系统？

懵逼树上懵逼果，懵逼树下你和我，面试官在问什么，我该怎么回答，完全不知道怎么回事；

有些经验的小伙伴可能会从解释 Proxy 的好处开始简单聊一下，比如： Proxy 是直接代理对象，而不是劫持对象的属性；更好的数组监控；

这样的回答，勉强算是合格吧

那到底应该怎么答呢？

面试官背后的出题逻辑

别急，咱们先整理一下思路，孙子兵法有云：“知己知彼，百战不殆”；面试就像打仗，你来我往，所以我们需要换位思考，想一想，为什么面试官会问这样一个问题？面试官想从这个问题里得到什么回答？这个问题可以考察哪些技术点？ 想清楚这个问题，再回到自己身上，这些技术点，你都掌握了吗？

说得直白一点，面试就像考试，你需要先 读题、审题才能答好这道题；

为什么很多人认为 “面试造火箭，工作拧螺丝”？因为没有换位思考，没有想清楚面试题背后的逻辑；

那我们想清楚这个逻辑之后，需要我们做的就是提取技术点，整理思路，做出对应解答；当然， 前提是你需要具备这些技术能力

那么接下来，我就尝试拆解一下这个面试题了，提取其中的知识点。

对于你来说，就是要看看这些知识点，你都掌握了多少？

为什么 Vue3.0 要重写响应式系统 ?

为什么重写？如果之前好好的，重写就没有意义，那之前存在什么问题，现在是怎么解决的？就是关键点了；

不知道你对 Vue2.x 的响应式掌握多少，是不是欠下了技术的债呢？没关系，我来帮你还债，先梳理 Vue2.x 的响应式；

其实基于这个面试题，背后还有很多技术点，上面这些，是与当前题目有直接关系的，实际面试中，很有可能基于这些技术点，在进行深入交流，这里就不扩展了，你能把现在这些问题理清楚，就算赚到了；

Vue2.x 响应式

其实关于这一点，在Vue 的官方文档中，早已经有过说明了，而且说得非常详细；官方文档： https:// cn.vuejs.org/v2/guide/r eactivity.html

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

我们使用官方给的一张图示，来梳理整个流程；

我们先来看一段代码

响应式原理

data 中的 obj 就是一个普通的 JavaScript 对象，通过点击 Click 按钮，将获取到的随机数赋值给 this.message ，而 this.message 指向的就是 data 中 obj 对象的 message 属性；当message 发生数据改变时，页面中 H1 标签的内容会随之改变，这个过程就是就是响应式的；那么Vue 是如何实现的呢？

首先，Vue 内部使用 Object.defineProperty() 将 Data 中的每一个成员都转换为 getter / setter 的形式；getter 用来依赖收集，setter 用来派发更新；而模板内容，最终会被编译为 render 函数，在 render 函数中，我们能发现 _v(_s(message)) message 被访问了，就会触发 getter 来进行依赖收集，而在代码中的点击事件中，一旦事件处理程序被触发执行，那么 message 则会被修改，就会触发 setter来进行派发更新；

虽然流程理清楚了，但是总感觉少点什么，怎么才能更通透呢？

我们用代码来模拟整个的实现过程；

defineProperty 模拟代码

defineProperty 的基本用法，直接看手册就行了： https:// developer.mozilla.org/z h-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

我们来看看代码：

 
    hello 
 

你没有看错，加上注释，一共 36行代码，这就是 Vue2.x 对响应式实现的整个流程；

继续实现多个数据的响应式

  

    hello
  
  

上面的代码只是模拟了 响应式 的原理，但Vue在实现中，肯定不会那么简单，接下来，我们看一下源码呀……

Vue2 源码解读

首先找到响应式代码的处理位置：

看完Vue2.x 响应式的代码，我们再回过头来思考最开始的问题， 为什么 Vue3.0 要重写响应式系统 ?

为什么重写？如果之前好好的，重写就没有意义，那之前存在什么问题，换句话问就是 defineProperty 有什么问题？

Object.defineProperty 的问题

其实， defineProperty 的问题，在Vue2.x 的手册中，已经说过了；“哎，很多人就是不看文档啊”

https:// cn.vuejs.org/v2/guide/r eactivity.html#%E5%AF%B9%E4%BA%8E%E6%95%B0%E7%BB%84

下面分别使用 Vue2 和 Vue3 实现了一个小功能，代码一模一样，功能当然也一样，但是，在 Vue2 中就会有Bug，而运行在vue3中的，则没有任何问题；

Vue2:

Vue3:

其核心点在于 defineProperty 不能很好的实现对数组下标的监控，而在 Vue2 的实现代码中，没有更好的方案对此进行改善，尤大索性直接放弃了实现；关于这个问题，尤大也在 github 做过回应，截个图给大家看看；

那么，Vue 目前还没有解决的问题，Vue3中显然是已经解决的了，问题是，Vue3 是如何解决的呢？前面在 Vue3 的代码中我们使用的是传统的 Options Api 来实现的数据响应式， 而在 Vue3 中全新的 Composition Api 也实现了响应式系统，我们先来感受一下 Composition Api 的基础用法

Composition API 的响应式系统

ref 响应式

reactive 响应式

Vue3 中的响应式是如何实现的呢？关键点在于Proxy 函数；

Proxy 实现原理

使用 Proxy 实现的响应式代码，要比使用 defineProperty 的代码简单得多，因为 Proxy 天然的能够对整个对象做监听，而不需要对数据行遍历后做监听，同时也就解决了数组下标的问题；

我们来一段模拟代码看一下：

    hello