| 编辑推荐: |
本文主要介绍了为什么
Vue3.0 要重写响应式系统 ?响应式原理、Object.defineProperty
的问题、Composition API 的响应式系统等相关内容。
本文来自于bilibili,由火龙果软件Anna编辑推荐。 |
|
面试的时候经常被问到 响应式 相关的内容，而Vue3.0 更新后，面试官又有了新的武器；
面试官：为什么 Vue3.0 要重写响应式系统？
懵逼树上懵逼果，懵逼树下你和我，面试官在问什么，我该怎么回答，完全不知道怎么回事；
有些经验的小伙伴可能会从解释 Proxy 的好处开始简单聊一下，比如： Proxy 是直接代理对象，而不是劫持对象的属性；更好的数组监控；
这样的回答，勉强算是合格吧
那到底应该怎么答呢？
面试官背后的出题逻辑
别急，咱们先整理一下思路，孙子兵法有云：“知己知彼，百战不殆”；面试就像打仗，你来我往，所以我们需要换位思考，想一想，为什么面试官会问这样一个问题？面试官想从这个问题里得到什么回答？这个问题可以考察哪些技术点？
想清楚这个问题，再回到自己身上，这些技术点，你都掌握了吗？
说得直白一点，面试就像考试，你需要先 读题、审题才能答好这道题；
为什么很多人认为 “面试造火箭，工作拧螺丝”？因为没有换位思考，没有想清楚面试题背后的逻辑；
那我们想清楚这个逻辑之后，需要我们做的就是提取技术点，整理思路，做出对应解答；当然，前提是你需要具备这些技术能力
那么接下来，我就尝试拆解一下这个面试题了，提取其中的知识点。
对于你来说，就是要看看这些知识点，你都掌握了多少？
为什么 Vue3.0 要重写响应式系统 ?
为什么重写？如果之前好好的，重写就没有意义，那之前存在什么问题，现在是怎么解决的？就是关键点了；
不知道你对 Vue2.x 的响应式掌握多少，是不是欠下了技术的债呢？没关系，我来帮你还债，先梳理 Vue2.x
的响应式；
其实基于这个面试题，背后还有很多技术点，上面这些，是与当前题目有直接关系的，实际面试中，很有可能基于这些技术点，在进行深入交流，这里就不扩展了，你能把现在这些问题理清楚，就算赚到了；
Vue2.x 响应式
其实关于这一点，在Vue 的官方文档中，早已经有过说明了，而且说得非常详细；官方文档
当你把一个普通的 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 的基本用法，直接看手册就行了：
我们来看看代码：
你没有看错，加上注释，一共 36行代码，这就是 Vue2.x 对响应式实现的整个流程；
继续实现多个数据的响应式
上面的代码只是模拟了 响应式 的原理，但Vue在实现中，肯定不会那么简单，接下来，我们看一下源码呀……
Vue2 源码解读
首先找到响应式代码的处理位置：
看完Vue2.x 响应式的代码，我们再回过头来思考最开始的问题，为什么 Vue3.0 要重写响应式系统
?
为什么重写？如果之前好好的，重写就没有意义，那之前存在什么问题，换句话问就是 defineProperty
?有什么问题？
Object.defineProperty 的问题
其实， defineProperty 的问题，在Vue2.x 的手册中，已经说过了；“哎，很多人就是不看文档啊”
下面分别使用 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
天然的能够对整个对象做监听，而不需要对数据行遍历后做监听，同时也就解决了数组下标的问题；
我们来一段模拟代码看一下：
|
