首先我们应该清楚响应式和双向绑定的区别：
响应式是vue的核心特性之一，即数据驱动视图，我们修改数据视图也随之响应更新，所谓响应式就是响应式数据和依赖(使用到响应式数据的地方)之间的关系，当这些响应式数据发生变化的时候，可以通知那些绑定这些数据的依赖进行相关操作，可以是 DOM 更新，也可以是执行一个回调函数。
而双向绑定通常是指我们使用的v-model指令的实现，是vue的一个特性，简单地说原理就是input时间和value的语法糖，vue通过v-model指令为组件添加上input事件处理和value属性的赋值，在此不过多赘述。
响应式实现的核心是Object.defineProperty方法，我们知道：数据驱动视图的关键点则在于我们如何知道数据发生了变化，只要知道数据在什么时候变了，那么问题就变得迎刃而解，我们只需在数据变化的时候去通知视图更新即可。
要想知道数据什么时候被读取了或数据什么时候被改写了，其实不难，`JS`为我们提供了`Object.defineProperty`方法，通过该方法我们就可以轻松的知道数据在什么时候发生变化。通过Object.defineProperty方法把需要变成响应式的属性的读和写分别使用get()和set()进行拦截，每当该属性进行读或写操作的时候就会触发get/set方法。
Object.defineproperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
Object.defineproperty可以接收三个参数
Object.defineproperty(obj, prop, desc)
obj : 第一个参数就是要在哪个对象身上添加或者修改属性
prop : 第二个参数就是添加或修改的属性名
desc ： 配置项，一般是一个对象，包括：1、writable 是否可重写；2、value 当前值； 3、get 读取时内部调用的函数； 4、set 写入时内部调用的函数； 5、enumerable 是否可以遍历； 6、configurable 是否可以再次修改配置项
但是，Object.defineProperty方法只能对属性进行拦截，而不会对某个对象进行拦截，所以我们需求额外的方法，vue提供了Observer类来实现这个目标：
代码块1
/**
* Observer类会通过递归的方式把一个对象的所有属性都转化成可观测对象
*/
export class Observer {
constructor (value) {
this.value = value
// 给value新增一个__ob__属性，值为该value的Observer实例
// 相当于为value打上标记，表示它已经被转化成响应式了，避免重复操作
def(value,'__ob__',this)
if (Array.isArray(value)) {
// 当value为数组时的逻辑
// ...
} else {
this.walk(value)
}
}
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
}
/**
* 使一个对象转化成可观测对象
* @param { Object } obj 对象
* @param { String } key 对象的key
* @param { Any } val 对象的某个key的值
*/
function defineReactive (obj,key,val) {
if (arguments.length === 2) {
val = obj[key]
}
if(typeof val === 'object'){
new Observer(val)
}
const dep = new Dep() //实例化一个依赖管理器，生成一个依赖管理数组dep
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get(){
dep.depend() // 在getter中收集依赖
return val;
},
set(newVal){
if(val === newVal){
return
}
val = newVal;
dep.notify() // 在setter中通知依赖更新
}
})
}
observer类转换原理：
observer类用来将一个正常的object转换成可观测的object，并且给转换对象增加一个_ob_属性，值为该对象Observer实例，这个操作相当于为value打上标记，避免重复操作。同时判断数据类型，只有object类型的数据才会调用walk将每一个属性转换成getter/setter的形式来进行侦测变化。最后，在defineReactive中当传入的属性值还是一个object时，使用new observer（）来递归子属性，这样我们就可以把对象中的所有属性（包括子属性）都转换成getter/setter的形式，也就是说，只要把一个object对象传到Observer中，那么这个object就会变成可观测的、响应式的object。
注意：对象和数组转换方式不同，先看对象的转换方式
object依赖收集
object变得可观测后，我们就知道数据什么时候发生了变化，那么当数据发生变化时，我们去通知视图更新就好了。那么我们到底改通知谁去变化呢？总不能一个数据变化了，把整个视图全部更新一遍吧。其实就是视图里谁用到了这个数据就更新谁。 换个官方的说法，我们把“谁用到了这个数据”称为“谁依赖了这个数据”，我们给每一个数据都建立一个依赖数组（一个数据可能多处使用），谁依赖了这个数据就把谁放入这个依赖数组中，那么当数据发生变化的时候，我们就去它对应的依赖数组中把每个依赖都通知一遍，这个过程就是依赖收集。
那么何时收集依赖？何时通知依赖更新？把依赖收集到哪里呢？
所谓谁用到了这个数据，其实就是谁获取了这个数据，而可观测的数据被获取时会触发getter属性，那么我们在getter中收集这个依赖。同样，当这个数据变化时会触发setter属性，那么我们可以再setter中通知依赖更新。
我们给每个数据都建一个依赖数组，谁依赖了这个数据我们就把谁放入这个依赖数组中。vue提供了一个依赖管理器类Dep,代码如下：
代码块2：
// 源码位置：src/core/observer/dep.js
export default class Dep {
constructor () {
this.subs = []
}
addSub (sub) {
this.subs.push(sub)
}
// 删除一个依赖
removeSub (sub) {
remove(this.subs, sub)
}
// 添加一个依赖
depend () {
if (window.target) {
this.addSub(window.target)
}
}
// 通知所有依赖更新
notify () {
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
/**
* Remove an item from an array
*/
export function remove (arr, item) {
if (arr.length) {
const index = arr.indexOf(item)
if (index > -1) {
return arr.splice(index, 1)
}
}
}
收集过程在代码块1中的defineReactive方法里，详情如上。
那么依赖到底是什么呢，落实到代码上就是Vue中的Watcher类，谁用到了数据，我们就为谁创建一个Watcher实例，数据变化时，我们直接通知依赖对应的watch实例，由watch实例去通知真正的视图。watcher类的实现如下：
代码块3
export default class Watcher {
constructor (vm,expOrFn,cb) {
this.vm = vm;
this.cb = cb;
this.getter = parsePath(expOrFn)
this.value = this.get()
}
get () {
window.target = this;
const vm = this.vm
let value = this.getter.call(vm, vm)
window.target = undefined;
return value
}
update () {
const oldValue = this.value
this.value = this.get()
this.cb.call(this.vm, this.value, oldValue)
}
}
/**
* Parse simple path.
* 把一个形如'data.a.b.c'的字符串路径所表示的值，从真实的data对象中取出来
* 例如：
* data = {a:{b:{c:2}}}
* parsePath('a.b.c')(data) // 2
*/
const bailRE = /[^\w.$]/
export function parsePath (path) {
if (bailRE.test(path)) {
return
}
const segments = path.split('.')
return function (obj) {
for (let i = 0; i < segments.length; i++) {
if (!obj) return
obj = obj[segments[i]]
}
return obj
}
}
1、当实例化Watcher类时，会先执行构造函数；
2、在构造函数中调用了this.get()实例方法；
3、在get()方法中，首先通过window.target = this 把实例自身赋给了全局的一个唯一对象window.target上，然后通过let value = this.getter.call(vm, vm)获取一下被依赖的数据，获取被依赖数据的目的是触发该数据上的getter，前面我们说过，在getter里面会调用dep.depend()收集依赖，而在dep.depend（）中取到挂载window.target上的值并将其存入依赖数组中，在get方法最后将window.target释放掉。
4、而当数据变化时，会触发数据的setter,在setter中调用了dep.notify方法，在dep.notify方法中，遍历所有依赖（即watcher实例），执行依赖的update方法，也就是watcher类中的update方法，在update方法中调用数据变化的更新回调函数，从而更新视图。
那么什么时候会创建Watcher实例呢？
1、安装组件mountComponent执行时；
2、初始化计算属性，执行initComputed方法；
3、stateMixin方法的vue.prototype.$watch方法中；
Object.defineProperty的不足之处：
这个方法仅仅只能观测到object数据的取值及设置，当我们向object离添加一对新的key/value或删除一对已有的key/value时，它是无法观测到的，导致无法通知依赖进行响应式更新。
下面我们再看看数组Array的响应式原理：
为什么object和array型数据会有两种不同的变化侦测方式？因为对于object我们使用的是JS提供的对象原型上的方法Object.defineProperty,而这个方法是对象原型上的，所以array无法使用这个方法，所以我们需要对array类型的数据设计另外一套侦测机制。思路还是一样的：在获取数据时收集依赖，数据变化时通知依赖更新。
注意：Object.defineProperty真的不能监听数组的变化吗？
其实Object.defineProperty是可以监听数组的变化的，
arr.forEach((val, index) => {
Object.defineProperty(arr, index, {
get() {
console.log('监听到了')
return val
},
set(newVal) {
console.log('变化了：', val, newVal)
val = newVal
}
})
})
但是这种直接通过下标获取数组元素的产假比较少，即使通过Object.defineProperty对数组进行监听，也监听不了push、pop、shift等数组方法。
那么在数组哪里收集依赖呢？
在组件data中的数据一般都是这样的，arr这个数据始终都存在于一个object对象中，那么要使用arr这个数据，就必须先从object数据对象中获取一下arr，而从object中获取arr自然就会触发arr的getter,所以就可以在getter中收集依赖。
data(){
return {
arr:[a,b,c]
}
}
现在我们已经知道何时收集依赖，那当array类型数据变化时我们如何得知呢？
要想让array类型数据发生变化，那必然是操作了array，而JS中提供的操作数组的方法就那么几种，我们可以把这些方法都重写一遍，在不改变原有功能的前提下，我们为其增加一些其他功能。Vue内部就是这么干的。
Vue创建了一个数组方法拦截器，它拦截在数组实例月Array.prototype之间，在拦截器内重写了操作数组的一些方法，当数组实例使用操作数组方法时，其实使用的是拦截器中重写的方法，而不再使用Array.prototype上的原生方法。
经过整理，`Array`原型中可以改变数组自身内容的方法有7个，分别是：`push`,`pop`,`shift`,`unshift`,`splice`,`sort`,`reverse`。那么源码中的拦截器代码如下：
// 源码位置：/src/core/observer/array.js
const arrayProto = Array.prototype
// 创建一个对象作为拦截器
export const arrayMethods = Object.create(arrayProto)
// 改变数组自身内容的7个方法
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
/**
* Intercept mutating methods and emit events
*/
methodsToPatch.forEach(function (method) {
// cache original method
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args // 如果是push或unshift方法，那么传入参数就是新增的元素
break
case 'splice':
inserted = args.slice(2) // 如果是splice方法，那么传入参数列表中下标为2的就是新增的元素
break
}
if (inserted) ob.observeArray(inserted) // 调用observe函数将新增的元素转化成响应式
// notify change
ob.dep.notify()
return result
})
})
上面的代码，首先创建了继承自Array原型的空对象arrayMethods，接着在arrayMethods上使用Object.defineProperty方法讲那些可以改变数组自身的7个方法遍历逐个进行封装。比如当我们使用push方法的时候，其实用的是arrayMethods.push,而arrayMethods.push就是封装的新函数mutator,也就是说，实际上执行的是函数mutator,而mutator函数内部执行了original函数，这个original函数就是Array.prototype上对应的原生方法。那么，接下来我们就可以在mutator函数中做一些其他事情，比如说发送变化通知。
此外，我们还需要把拦截器挂载到数组实例与Array.prototype之间，这样拦截器才能生效。我们只需要把数据的__proto__属性设置为拦截器arrayMethods即可，源码实现如下：
export class Observer {
constructor (value) {
this.value = value
this.dep = new Dep() // 实例化一个依赖管理器，用来收集数组依赖
if (Array.isArray(value)) {
const augment = hasProto
? protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
} else {
this.walk(value)
}
}
}
// 能力检测：判断__proto__是否可用，因为有的浏览器不支持该属性
export const hasProto = '__proto__' in {}
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
/**
* Augment an target Object or Array by intercepting
* the prototype chain using __proto__
*/
function protoAugment (target, src: Object, keys: any) {
target.__proto__ = src
}
/**
* Augment an target Object or Array by defining
* hidden properties.
*/
/* istanbul ignore next */
function copyAugment (target: Object, src: Object, keys: Array<string>) {
for (let i = 0, l = keys.length; i < l; i++) {
const key = keys[i]
def(target, key, src[key])
}
}
上面的代码首先判断浏览器是否支持__proto__，如果支持，则调用protoAugment函数把value.proto = arrayMethods;如果不支持，则调用copyAugment函数把拦截器中重写的7个方法循环加入到value上。拦截器生效以后，当数组数据发生变化时，我们就可以在拦截器中通知变化了，这样我们就完成了对Array型数据的观测。
如何收集依赖？
那么数组getter中到底如何收集依赖呢？这里有个注意点，那就是依赖管理器定义在Observer类中，而我们需要在getter中收集依赖，也就是说必须在getter中能够访问到Observer类中的依赖管理器，才能把依赖存进去。源码是这么做的：
function defineReactive (obj,key,val) {
let childOb = observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get(){
if (childOb) {
childOb.dep.depend()
}
return val;
},
set(newVal){
if(val === newVal){
return
}
val = newVal;
dep.notify() // 在setter中通知依赖更新
}
})
}
/**
* Attempt to create an observer instance for a value,
* returns the new observer if successfully observed,
* or the existing observer if the value already has one.
* 尝试为value创建一个0bserver实例，如果创建成功，直接返回新创建的Observer实例。
* 如果 Value 已经存在一个Observer实例，则直接返回它
*/
export function observe (value, asRootData){
if (!isObject(value) || value instanceof VNode) {
return
}
let ob
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__
} else {
ob = new Observer(value)
}
return ob
}
上面的代码中，我们首先通过observe函数为被获取的数据arr尝试创建一个Observer实例，在observe函数内部，先判断当前传入的数据上是否有__ob__属性，如果有，表示它已经被转化成功响应式的了，如果没有就调用new Observer（value）将其转化成响应式的，并把数据对应的Observer实例返回。 而在defineReactive函数中，首先获取数据对应的Observer实例childOb,然后在getter中调用Observer实例上的依赖管理器，从而将依赖收集起来。
如何通知依赖？
我们应该再拦截器里面通知依赖，想要通知依赖，首先要能访问到依赖。要访问到依赖，我们只要能访问到被转换成响应式的数据value即可，因为value上的__ob__就是其对应的Observer类实例，有了Observer类实例我们就能访问到它上面的依赖管理器，然后只需要调用依赖管理器的dep.notify方法即可。
/**
* Intercept mutating methods and emit events
*/
methodsToPatch.forEach(function (method) {
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
const result = original.apply(this, args)
const ob = this.__ob__
// notify change
ob.dep.notify()
return result
})
})
说了这么多，其实数组类型的数据响应式原理很简单：自定义方法是为了通知依赖，收集依赖就是递归数组每个元素，如果数组中的元素是数组，就满足Observer类中的数组条件；否则调用walk方法将元素进行响应式转化。
不足之处：上面方法实现的响应式，对于使用数组下标来修改数组是无法实现响应式的
以上就是vue响应式原理，写这篇文章主要是给自己做个笔记，另外文章中的源码部分摘抄自vue源码，详细代码请自行对比vue源码。
