vue的特点之一是由数据驱动视图（响应式数据绑定），在vue里我们可以将数据理解为状态，视图则是用户可以直观看到的页面，页面不完全是静态的，而动态的页面，是由用户操作引起，或者是后端数据变化引起的。我们可以将这种变化看作为状态变了，它由前一个状态变到了后一个状态，页面也就应该随之而变化
UI = render(state)
通过上述，我们应该会疑惑数据变化时怎么通知给VUE的？这就引出了vue中的变化侦测
变化侦测就是追踪状态，亦或者说是数据的变化，一旦发生了变化，就要去更新视图变化侦测可不是个新名词，它在目前的前端三大框架中均有涉及。在Angular中是通过脏值检查流程来实现变化侦测；在React是通过对比虚拟DOM来实现变化侦测，而在Vue中也有自己的一套变化侦测实现机制。
1.Object类型的数据响应式绑定原理(变化侦测）
数据驱动视图的关键点是在数据发生了变化，而在这之前我们应该要搞清楚数据是在什么时候发生的变化，而在我们知道数据发生变化的时候同步的图通知视图更新，所以我们要解决一下两个问题
1.怎样让数据变得可侦测？
2.数据变得可侦测之后，怎样通知视图更新？
Object数据属性的侦测
为了解决第一个问题，我们要引入Object.defineProperty()方法，我们先介绍一下这个方法的作用吧
Object.defineProperty()方法是直接在一个对象上定义一个新属性，或者修改一个对象的属性
具体用法可以参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
我们只要关注在调用这个方法修改或者定义新属性的时候，可以定义属性的存取getter函数和setter函数
回归到源码里，我们来整理一下在vue中是如何利用Object.defineProperty方法来让数据变得可侦测
在src/core/instance/state.js 中初始化状态中，会调用初始化数据的方法
而在整个initData方法里，我自己将整个方法划分为两部分
1.对data数据的数据校验和对数据key见的缓存
2.调用observe方法对属性进行侦测，这个也是最关键的点
现在我门来看看observer这个方法里面到底做了什么呢
这个方法里面主要new Observer(value)这行代码，
在上面的代码中，我们可以看到observer类，它用来将一个正常的object转换成可观测的object。
并且给value新增一个__ob__属性，值为该value的Observer实例。这个操作相当于为value打上标记，表示它已经被转化成响应式了，避免重复操作
然后判断数据的类型，只有object类型的数据才会调用walk将每一个属性转换成getter/setter的形式来侦测变化。 最后，在defineReactive中当传入的属性值还是一个object时使用new observer（val）来递归子属性，这样我们就可以把obj中的所有属性（包括子属性）都转换成getter/seter的形式来侦测变化。 也就是说，只要我们将一个object传到observer中，那么这个object就会变成可观测的、响应式的object。
observer类位于源码的src/core/observer/index.js中。
依赖收集
什么是依赖收集
在上一章中，我们迈出了第一步：让object数据变的可观测。变的可观测以后，我们就能知道数据什么时候发生了变化，那么当数据发生变化时，我们去通知视图更新就好了。那么问题又来了，视图那么大，我们到底该通知谁去变化？总不能一个数据变化了，把整个视图全部更新一遍吧，这样显然是不合理的。此时，你肯定会想到，视图里谁用到了这个数据就更新谁呗。对！你想的没错，就是这样。
视图里谁用到了这个数据就更新谁，我们换个优雅说法：我们把"谁用到了这个数据"称为"谁依赖了这个数据",我们给每个数据都建一个依赖数组(因为一个数据可能被多处使用)，谁依赖了这个数据(即谁用到了这个数据)我们就把谁放入这个依赖数组中，那么当这个数据发生变化的时候，我们就去它对应的依赖数组中，把每个依赖都通知一遍，告诉他们："你们依赖的数据变啦，你们该更新啦！"。这个过程就是依赖收集。
何时收集依赖？何时通知依赖更新？
明白了什么是依赖收集后，那么我们到底该在何时收集依赖？又该在何时通知依赖更新？
其实这个问题在上面已经回答了，我们说过：谁用到了这个数据，那么当这个数据变化时就通知谁。所谓谁用到了这个数据，其实就是谁获取了这个数据，而可观测的数据被获取时会触发getter属性，那么我们就可以在getter中收集这个依赖。同样，当这个数据变化时会触发setter属性，那么我们就可以在setter中通知依赖更新。
总结一句话就是：在getter中收集依赖，在setter中通知依赖更新。
把依赖收集到哪里
明白了什么是依赖收集以及何时收集何时通知后，那么我们该把依赖收集到哪里？
在3.1小节中也说了，我们给每个数据都建一个依赖数组，谁依赖了这个数据我们就把谁放入这个依赖数组中。单单用一个数组来存放依赖的话，功能好像有点欠缺并且代码过于耦合。我们应该将依赖数组的功能扩展一下，更好的做法是我们应该为每一个数据都建立一个依赖管理器，把这个数据所有的依赖都管理起来。OK，到这里，我们的依赖管理器Dep类应运而生，代码如下：
// 源码位置：src/core/observer/dep.js
在上面的依赖管理器Dep类中，我们先初始化了一个subs数组，用来存放依赖，并且定义了几个实例方法用来对依赖进行添加，删除，通知等操作。
有了依赖管理器后，我们就可以在getter中收集依赖，在setter中通知依赖更新了，代码如下：
在上述代码中，我们在getter中调用了dep.depend()方法收集依赖，在setter中调用dep.notify()方法通知所有依赖更新。
依赖到底是谁
通过上一章节，我们明白了什么是依赖？何时收集依赖？以及收集的依赖存放到何处？那么我们收集的依赖到底是谁？
虽然我们一直在说”谁用到了这个数据谁就是依赖“，但是这仅仅是在口语层面上，那么反应在代码上该如何来描述这个”谁“呢？
其实在Vue中还实现了一个叫做Watcher的类，而Watcher类的实例就是我们上面所说的那个"谁"。换句话说就是：谁用到了数据，谁就是依赖，我们就为谁创建一个Watcher实例。在之后数据变化时，我们不直接去通知依赖更新，而是通知依赖对应的Watch实例，由Watcher实例去通知真正的视图。
Watcher类的具体实现如下：
谁用到了数据，谁就是依赖，我们就为谁创建一个Watcher实例，在创建Watcher实例的过程中会自动的把自己添加到这个数据对应的依赖管理器中，以后这个Watcher实例就代表这个依赖，当数据变化时，我们就通知Watcher实例，由Watcher实例再去通知真正的依赖。
那么，在创建Watcher实例的过程中它是如何的把自己添加到这个数据对应的依赖管理器中呢？
下面我们分析Watcher类的代码实现逻辑：
当实例化Watcher类时，会先执行其构造函数；
在构造函数中调用了this.get()实例方法；
在get()方法中，首先通过window.target = this把实例自身赋给了全局的一个唯一对象window.target上，然后通过let value = this.getter.call(vm, vm)获取一下被依赖的数据，获取被依赖数据的目的是触发该数据上面的getter，上文我们说过，在getter里会调用dep.depend()收集依赖，而在dep.depend()中取到挂载window.target上的值并将其存入依赖数组中，在get()方法最后将window.target释放掉。
而当数据变化时，会触发数据的setter，在setter中调用了dep.notify()方法，在dep.notify()方法中，遍历所有依赖(即watcher实例)，执行依赖的update()方法，也就是Watcher类中的update()实例方法，在update()方法中调用数据变化的更新回调函数，从而更新视图。
简单总结一下就是：Watcher先把自己设置到全局唯一的指定位置（window.target），然后读取数据。因为读取了数据，所以会触发这个数据的getter。接着，在getter中就会从全局唯一的那个位置读取当前正在读取数据的Watcher，并把这个watcher收集到Dep中去。收集好之后，当数据发生变化时，会向Dep中的每个Watcher发送通知。通过这样的方式，Watcher可以主动去订阅任意一个数据的变化。为了便于理解，我们画出了其关系流程图，如下图：
以上，就彻底完成了对Object数据的侦测，依赖收集，依赖的更新等所有操作。
关于这一篇文章由于本人是第一次看vue源码，有很多知识点都有点似懂非懂的感觉，所以就从【Vue源码系列-Vue中文社区】https://vue-js.com/learn-vue/reactive/object.html#_1-%E5%89%8D%E8%A8%80中摘抄了很多，只为个人学习用，不喜勿喷