深入响应式原理

一、深入响应式原理?

前端开发最重要的 2 个工作，一个是把数据渲染到页面，另一个是处理用户交互(数据的变更会触发 DOM 的变化)。

eg: 当我们去修改 this.message 的时候?
如果不用 Vue 的话，我们会通过最简单的方法实现这个需求：监听点击事件，修改数据，手动操作 DOM 重新渲染。这个过程和使用 Vue 的最大区别就是多了一步“手动操作 DOM 重新渲染”。这一步看上去并不多，但它背后又潜在的几个要处理的问题：
1、我需要修改哪块的 DOM？
2、我的修改效率和性能是不是最优的？
3、我需要对数据每一次的修改都去操作 DOM 吗？
4、我需要 case by case 去写修改 DOM 的逻辑吗？
如果我们使用了 Vue，那么上面几个问题 Vue 内部就帮你做了，那么 Vue 是如何在我们对数据修改后自动做这些事情呢，接下来我们将进入一些 Vue 响应式系统的底层的细节。

二、响应式对象?

实现响应式的核心是利用了 ES5 的 Object.defineProperty，这也是为什么 Vue.js 不能兼容 IE8 及以下浏览器的原因，我们先来对它有个直观的认识。
语法：

1.png

obj 是要在其上定义属性的对象；prop 是要定义或修改的属性的名称；descriptor 是将被定义或修改的属性描述符。核心是descriptor，它有很多可选键值，我们最关心的是 get 和 set，一旦对象拥有了 getter 和 setter，我们可以简单地把这个对象称为响应式对象。那么 Vue.js 把哪些对象变成了响应式对象了呢？

2.png

3.png

4.png

proxy: 代理的作用是把 props 和 data 上的属性代理到 vm 实例上，这也就是为什么比如我们定义了如下 props，却可以通过 vm 实例访问到它。

5.png

observe: 的功能就是用来监测数据的变化，就是给非 VNode 的对象类型数据添加一个 Observer，如果已经添加过则直接返回，否则在满足一定条件下去实例化一个 Observer 对象实例。

6.png

7.png

8.png

P: defineReactive 的功能就是定义一个响应式对象，给对象动态添加 getter 和 setter。
1、defineReactive最开始初始化 Dep 对象的实例;
2 、拿到 obj 的属性描述符；
3、递归调用 observe 方法，这样就保证了无论 obj 的结构多复杂，它的所有子属性也能变成响应式的对象，这样我们访问或修改 obj 中一个嵌套较深的属性，也能触发 getter 和 setter。

总结：
这一节我们介绍了响应式对象，核心就是利用 Object.defineProperty 给数据添加了 getter 和 setter，目的就是为了在我们访问数据以及写数据的时候能自动执行一些逻辑：getter 做的事情是依赖收集，setter 做的事情是派发更新