Vue2.X官方文档中已经阐述了深入响应式原理，简单来讲就是数据修改之后，被es5里边Object .defineProperty,setter拦截到了，通知watcher，watcher对函数进行渲染，这个过程种要创建新的虚拟dom节点，对比旧的虚拟dom节点，对比完之后做成一个补丁，把补丁打在真实dom结构中，真实dom再更新，视图发生改变。
Object.defineProperty()数据劫持/数据代理
利用javascript引擎赋予的功能，检测对象属性变化
Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
var obj = {};
Object.defineProperty(obj, 'a', {
value: 3
})
Object.defineProperty(obj, 'b', {
value: 5
})
console.log(obj) // {a:3,b:5}
console.log(obj.a, obj.b) // 3 5Object.defineProperty()可以设置额外隐藏的属性
Object.defineProperty(obj, 'a', {
// value: 3,
get(){},
// 是否可写
writable: true
})Object.defineProperty()真正对数据的操作是他它自身的getter函数(读取)和setter函数(设置)来进行的：
Object.defineProperty(obj, 'a', {
// getter函数
get(){
console.log(ole.log('访问a属性');
return 7;
},
// setter函数
set(nVal) {
console.log('修改a属性为'+nVal)
}
})
console.log(obj.a); // 7
obj.a = 10;
console.log(obj.a); // 7由以上示例可知，当访问obj的a属性时，值为7，当修改a属性的值之后，从打印结果看出，setter函数确实执行了，但是新值并没有赋给getter的返回值，此时的getter和setter缺少了一个连接的桥梁：变量，所以上面的代码稍作改动：
var temp = '';
Object.defineProperty(obj, 'a', {
// getter函数
get(){
console.log(ole.log('访问a属性');
return temp;
},
// setter函数
set(nVal) {
console.log('修改a属性为'+nVal);
temp = nVal;
}
})
console.log(obj.a); // 7
obj.a = 10;
console.log(obj.a); // 10到这里Object.defineProperty()的用法就已经很清楚了，接下来要做的就是怎样让它更美观优雅~
defineReactive函数
var obj = {};
function defineReactive (data, key, val) {
// val 在defineReactive函数里给getter，setter函数营造了一个闭包环境，这样就不用再声明一个临时变量了
Object.defineProperty(data, key, {
// 可枚举
enumerable: true,
// 可以被配置，比如可以被delete
configurable: true,
// getter函数
get(){
console.log(ole.log('访问a属性');
return val;
},
// setter函数
set(nVal) {
console.log('修改a属性为'+nVal);
if (nVal === val) return;
val = nVal;
}
})
}
defineReactive(obj, 'a', 10);
conso.log(obj.a); // 10
obj.a++; // 赋值时调用了setter函数
console.log(obj.a); // 11 这个代码里边解决变量的问题，不过这个例子只满足单层的对象，那么像obj:{a:{m:{n:5}}}这种复杂结构的数据，就需要进行逐层遍历，递归地调用Object.defineProperty()去处理~
var obj = {
a:{
m:{
n:5
}
}
}访问obj.a.m.n属性，不能每次都设置a属性，所以当有复杂结构的对象时，defineReactive函数需要作参数判断：
function defineReactive (data, key, val) {
if (arguments.length == 2) {
val = data[key]
}
...
}
defineReactive(obj, 'a')
console.log(obj.a.m.n); // 当访问obj.a.m.n属性，只访问到了a这一层递归侦测对象全部属性
对于obj的a.m.n属性，需要循环递归地实现Object.defineProperty()，此时创建一个类Observer，它主要是将一个普通对象的任何属性都能被侦测到的工具类：
stateDiagram-v2
Observer(观察者) --> 将一个正常的object转换为每个层级的属性都是响应式（可以被侦测的）的object Observer.js
export default class Observer {
constructor(value) {
// 每一个Observer的实例身上，都有一个dep
this.dep = new Dep()
// 给实例（this，构造函数中的this不是表示类本身，而是表示实例）添加了__ob__属性，值就是value（这次new的实例）
def(value, '__ob__', this, false)
// console.log('我是Observer构造器', value)
// Observer 类的目的：将一个正常的object转换为每个层级的属性都是响应式（可以被侦测的）的object
// 检查它是数组还是对象
if (Array.isArray(value)) {
// 如果是数组，要非常强行，将这个数组的原型，指向arrayMethods
// setPrototypeOf强制地定义value的原型
Object.setPrototypeOf(value, arrayMethods)
// 让这个数组变得 observe
this.observeArray(value)
} else {
this.walk(value)
}
}
// 遍历
walk(value) {
for (let k in value) {
defineReactive(value, k)
}
}
// 数组的特殊遍历
observeArray(arr) {
for (let i = 0, l = arr.length; i < l;i++) {
// 逐项进行observe
observe(arr[i])
}
}
}这个类被创建出来被实例化为对象才有意义，所以如何被实例化值得思考--创建一个observe函数
observe.js
import Observer from "./Observer";
// 这个函数只为对象服务
export const observe = function (value) {
// 如果value不是对象，什么都不做
if (typeof value !== object) return
// 定义ob，ob就是要存储Observer的实例
var ob;
if (typeof value.__ob__ !== 'undefined') {
// __ob__ 就是存储Observer类的实例的，区别于其他常见的属性
ob = value.__ob__; // value就是要侦测的对象，就是defineReactive中传入的data，但是适用于val = data[key]
} else {
ob = new Observer(value);
}
return ob;
}obj必然是先调用observe触发，再看这个对象有没有__ob__，如果没有，调用New Observer()，将产生的实例添加到__ob__上，此时obj的a属性active的闭包环境了，由于a属性的值是m:{n:5}},在setter函数中被设置的时候，m:{n:5}}作为新的对象又触发了observe，也就是图上的遍历下一层属性。
总结起来就是对象obj先触发observe，在observe实例化Observer作为obj的__ob__属性，而在Observer类的构造函数中，对对象进行了遍历，每一次遍历又调用了defineReactive设置属性，在设置属性时对子元素进行了observe，至此形成了递归。
数组的响应式处理
Vue2以Array.prototype为原型，创建了一个arrayMethods对象，然后用ES6中的setPrototypeOf强制地使arr的__proto__指向了arrayMethods对象，这样就可以调用arrayMethods对象中被重写的七个数组方法了，它们分别是push、pop、shift、unshift、splice、sort、reverse。
array.js
import { def} from './utils.js';
const arrayPrototype = Array.prototype;
// 以Array.prototype为原型创建arrayMethods对象
// 暴露arrayMethods
export const arrayMethods = Object.create(arrayPrototype)
// console.log(arrayMethods)
// 要被改写的七个数组方法
const methodsNeedChange = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
methodsNeedChange.forEach((methodName) => {
// console.log('methodName', methodName)
// 备份原来的方法, 因为push，pop等7个函数的功能不能被剥夺
const original = arrayPrototype[methodName];
// 把这个数组身上的__ob__取出来，__ob__已经被添加了，因为数组肯定不是最高层，比如obj.g属性是数组，obj不能是数组，第一次遍历obj这个对象的第一层的时候，已经给g属性（就是这个数组）添加了__ob__属性
// 定义新的方法
def(arrayMethods, methodName, function(){
// 恢复原来的功能
const result = original.apply(this, arguments);
// 把类数组对象变成数组
const args = [...arguments];
// console.log(arguments);
const ob = this.__ob__;
// 有三种方法push/unshift/splice能够插入新项，现在要把插入的新项也要变为observe的
let inserted = [];
switch (methodName) {
case 'push':
case 'unshift':
inserted = args;
break;
case 'splice':
// splice 格式是splice（下标，数量，插入的新项）
inserted = args.slice(2)
break;
}
// 判断有没有要插入的新项，让新项也变成响应式的
if (inserted) {
ob.observeArray(inserted);
}
console.log('lalala')
ob.dep.notify()
return result;
}, false)
})依赖收集
在getter中收集依赖，在setter中触发依赖
- 把依赖收集的代码封装成一个Dep类，它专门用来管理依赖，每个Observer的实例，成员中都有一个Dep的实例；
- Watcher是一个中介，数据发生变化时通过Watcher中转，通知组件；
- 依赖就是Watcher。只有Watcher触发的getter才会收集依赖，哪个Watcher触发了getter，就把哪个Watcher收集到Dep中；
Dep使用发布订阅模式，当数据发生变化时，会循环依赖列表，把所有的Watcher都通知一遍。
Dep类就是用来收集依赖，Watcher就是依赖。Dep.js var uid = 0; export default class Dep { constructor() { // console.log('我是dep类的构造器') this.id = uid++; // 用数组存储自己的订阅者。subs是英语subscribes订阅者的意思。 // 这个数组里面放的是Watcher的实例 this.subs = []; } // 添加订阅 addSub (sub) { this.subs.push(sub) } // 添加依赖 depend () { // Dep.target 就是一个我们自己指定的全局的位置，你用window.target也行，只要全局唯一，没有歧义就行 if (Dep.target) { // getter函数就会从全局唯一的这个地方读取正在读取数据的Watcher，并把这个Watcher收集到Dep当中 this.addSub(Dep.target) } } // 通知更新 notify () { console.log('我是notify') // 浅克隆一份 const subs = this.subs.slice(); // 遍历 for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } } }import Dep from "./Dep"; var uid = 0; export default class Watcher { constructor(target, expression, callback) { // console.log('我是Watcher类的构造器') this.id = uid++; this.target = target; this.getter = parsePath(expression) this.callback = callback; this.value = this.get() } update () { this.run() } get() { // 进入依赖收集阶段。让全局的Dep.target设置为Watcher本身，那么就是进入依赖收集阶段 Dep.target = this; const obj = this.target; var value; // 只要能找，就一直找,try{}防止找不到 try { value = this.getter(obj) } finally { // 退出依赖收集阶段，此Watcher把依赖收集阶段的资格让给别的Watcher // 所有Watcher都在竞争，当前哪个Watcher正在读getter，哪个Watcher就是Dep的target Dep.target = null; } return value } run() { this.getAndInvoke(this.callback) } getAndInvoke(cb) { const value = this.get() if (value !== this.value || typeof value === 'object') { const oldValue = this.value; this.value = value; // this.callback() cb.call(this.target, value, oldValue) } } } function parsePath(str) { var segments = str.split('.'); console.log('segments:', segments) return (obj) => { for (let i =0; i < segments.length; i++) { if (!obj) return; obj = obj[segments[i]] } return obj } }
完整代码：vue2数据响应式原理