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

面试的时候经常被问到 响应式 相关的内容，而Vue3.0 更新后，面试官又有了新的武器；

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

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

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

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

那到底应该怎么答呢？

 

面试官背后的出题逻辑

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

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

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

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

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

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

 

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

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

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

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

 

Vue2.x 响应式

其实关于这一点，在Vue 的官方文档中，早已经有过说明了，而且说得非常详细；官方文档：https://cn.vuejs.org/v2/guide/reactivity.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，从而使它关联的组件重新渲染。

 

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

我们先来看一段代码