vue是怎么实现数据响应式的？

vue响应式原理介绍

相信用过vue的都知道，vue中data中定义的数据会随着我们通过方法改变该数据的同时，页面上相关此数据的也会相应的刷新，实现响应式数据。可你知道它是如何实现这一功能的吗？下面让我们来了解了解它是如何做到这神奇操作的。

1.Object.defineProperty 监听修改读取数据

Object.defineProperty(obj, prop, descriptor) 可传入三个值，其作用是该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
第一个值传入要修改的对象
第二个值传入该对象中要修改的key
第三个值是一个对象，里面有set 和get两种方法 set为值发生修改是所做的操作 get为读取改值时的操作
默认配置如下

现在我们来研究下vue是如何利用Object.defineProperty 监听修改读取数据的

我们创建一个对象，并利用Object.keys（）将对象中的key返回到一个数组中，并对该数组forEach遍历
将key对应值先取过来，对这个对象中每个不同的key通过Object.defineProperty修改并监听数据的变化，在修改该key对应的value值时，调用set方法 打印下监听xxxx数据改变 并将修改值赋给value
在读取该key对应的value值时，调用get方法 打印下获取xxxx对应的值 并直接返回当前value值

我们在控制台修改 和 查看 下obj对象中message值 效果如下

看到这里是不是有点想法了？ 我们只要在修改数据的方法set里面 将页面中所有用到该key的数据统筹在一起关联起来，一旦其中有一个该key的数据变化，则通知所有的用到该key的数据一起变化，即将新的数据遍历给所有该key的数据
那么该如何实现呢？这就是下面要说的

2.发布订阅模式

什么是发布订阅模式？简单来说，就是当key对应的数据被修改时，Vue它要知道该去通知哪些数据也要发生改变，所以我们要把所有该页面上用到该对象中同一key加入到让它通知的名单里面就好像是一起订阅了，数据变化就发布，所有订阅者将会同时刷新。
要实现这种模式 我们需要定义两种类 发布者 和订阅者
订阅者
传递一个默认值，用来辨别和其他对象的name值不一样 这里的key对应的就是name
在自身上定义一个更新方法 传入一个字符串赋值给对应的key----name

这里我实例化三个对象，改变其中一个张三 其他两个并没有变化 因为现在它们没有任何关系

发布者
构造器里创建一个数组把用到的该对象中的同一个key放在数组里 即为观察者名单
通过addSub方法将传入的对象加入到数组中 对其进行观察
通过notify方法 对该数组中的所有元素遍历，即所有被观察的，传入修改的值，并让它们启动自身带的方法update进行更新，因为传入的值是相同的，所以最后观察者名单里的数据将会统一刷新，做到数据一致，实时更新。

将三个实例化对象加入到发布者的数组中 即订阅者名单上

这里我调用发布者上的notify方法修改数据，这里可以看到所有在观察者名单上的数据都发生了变化，
name都变成了 ‘赵六’
像上面没有如果它们没有加入观察者名单，那么它们其中一个改变是不会影响的。

END

相信通过这两种方式，能让你理解vue的响应式是如何达成的。
总结下：将data对象的值通过Object.defineProperty 中的set方法监听修改读取数据，在执行set时，既现在值发生改变，执行发布者类中的notify 将订阅者名单里的对象进行遍历调用其对象自身的update更新方法，这样修改其中一个该key对应的value，其在此页面上所有的该key对象都将执行update进行更新最新值来达到数组的响应式和一致性。

如有不当之处，请不吝赐教~
创作不易，点个赞吧，米娜~