你真的理解了Vue数据响应式原理吗？

前言

本文主要偏理论，文字量较多，建议您在时间充裕的条件下阅读

一.什么是数据响应式？

官网解释：Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。

翻译：当数据发生改变时，页面上展示的相应的数据也自动发生改变

数据发生变化后，会重新对页面渲染，这就是Vue响应式，那么这一切是怎么做到的呢？想完成这个过程，我们需要：

1. 侦测数据的变化（数据劫持 / 数据代理）
2. 收集视图依赖了哪些数据（依赖收集）
3. 数据变化时，自动“通知”需要更新的视图部分，并进行更新（发布订阅模式）

在探究响应式基本原理之前，我们来聊聊什么是依赖收集 ：

为什么要依赖收集？

我们之所以要观察数据，其目的在于当数据的属性发生变化时，可以通知那些曾经使用了该数据的地方。比如第一例子中，模板中使用了price 数据，当它发生变化时，要向使用了它的地方发送通知。

什么是依赖收集？ 

所谓的依赖，其实就是Watcher。至于如何收集依赖，总结起来就一句话，在getter中收集依赖，在setter中触发依赖。先收集依赖，即把用到该数据的地方收集起来，然后等属性发生变化时，把之前收集好的依赖循环触发一遍就行了。

具体来说，当外界通过Watcher读取数据时，便会触发getter从而将Watcher添加到依赖中，哪个Watcher触发了getter，就把哪个Watcher收集到Dep中。当数据发生变化时，会循环依赖列表，把所有的Watcher都通知一遍。

最后我们对 defineReactive 函数进行改造，在自定义函数中添加依赖收集和派发更新相关的代码,实现了一个简易的数据响应式。

了解了这些之后，让我们来继续往下探究。 

二.响应式基本原理

1. Object.defineProperty

通过Object.defineProperty来实现监听数据的读取和改变（属性中的getter和setter方法） 从而实现数据劫持

那么问题来了，该如何侦测数据的变化 ？

在Javascript中，其实有两种办法可以侦测到变化：使用 Object.defineProperty和ES6的 Proxy，这就是进行数据劫持或数据代理

Object.defineProperty
Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

首先我们需要通过Object.defineProperty()方法把数据(data)设置为getter和setter的访问形式，这样我们就可以在数据被修改时在setter方法设置监视修改页面信息，每当数据被修改时，就会触发对应的set方法，然后我们可以在set方法中去调用操作dom的方法。

但是这种方法也有一个致命的缺陷

Vue2使用object.defineProperty()来实现响应式，会有它的局限性，比如无法监听对属性的添加删除操作，无法监听数组基于下标的修改操作，不支持Map，Set，WeakMap，WeakSet等缺陷。

在Vue3中这个问题已经被解决，Vue3改用Proxy来实现响应式可以解决这些问题，并且更好的支持了typescript，但同时也意味着vue3将放弃对低版本浏览器的兼容(兼容版本ie11以上)

Proxy
Proxy 是 ES6 的一个新特性。 Proxy 的代理是针对整个对象的，而不是对象的某个属性，因此不同于 Object.defineProperty 的必须遍历对象每个属性， Proxy 只需要做一层代理就可以监听同级结构下的所有属性变化，当然对于深层结构，递归还是需要进行的。此外 Proxy支持代理数组的变化。

2.观察者模式（发布者-订阅者） 

• Compile解析模板，把模板中变量换成数据，绑定更新函数，添加订阅者，收到通知就执行更新函数
• Watcher作为Observe和Compile中间的桥梁，订阅Observe属性变化的消息，触发Compile更新函数

观察者(订阅者) Watcher：

update()：当事件发生时，具体要做的事情

为什么引入Watcher
Vue 中定义一个 Watcher 类来表示观察订阅依赖。至于为什么要引入Watcher，《深入浅出vue.js》这本书给出了很好的解释:

当属性发生变化后，我们要通知用到数据的地方，而使用这个数据的地方有很多，而且类型还不一样，既有可能是模板，也有可能是用户写的一个watch,这时需要抽象出一个能集中处理这些情况的类。然后，我们在依赖收集阶段只收集这个封装好的类的实例进来，通知也只通知它一个，再由它负责通知其他地方。

依赖收集的目的是将观察者 Watcher 对象存放到当前闭包中的订阅者 Dep 的 subs 中,形成如下所示的这样一个关系（图参考《剖析 Vue.js 内部运行机制》）。

 

目标(发布者)  Dep:

①subs 数组：存储所有的观察者
②addSub()：添加观察者
③notify()：当事件发生，调用所有观察者的 update() 方法

1.为什么引入 Dep
收集依赖需要为依赖找一个存储依赖的地方，为此我们创建了Dep,它用来收集依赖、删除依赖和向依赖发送消息等。

于是我们先来实现一个订阅者 Dep 类，用于解耦属性的依赖收集和派发更新操作，说得具体点，它的主要作用是用来存放 Watcher 观察者对象。我们可以把Watcher理解成一个中介的角色，数据发生变化时通知它，然后它再通知其他地方。

3.当数据发生改变通过发布者订阅者模式来进行通知界面刷新 

三.响应过程

如图所示：

解释： 

首先要对数据(data)进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器（发布者）Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

Vue中的data中的每个属性都会被创建一个Dep对象，且解析el时进行视图的初始化，如果html中有多个地方用到该属性，则每个地方都将会生成一个Watcher的实例被放入到该属性对应Dep的实例中的subs数组中。当属性发生改变时，Observe监听到属性的改变，然后调用该属性对应的Dep实例的notify方法，然后notify方法会对Dep实例中的数组进行遍历然后同时调用遍历出的Watcher的实例进行update方法的调用进行视图的更新。