大家好，我是 辉夜真是太可爱啦 。这是我最近在写的【手把手教你搓Vue响应式原理】系列，本文将一步步地为你解开vue响应式原理的面纱。由于本人也是在写这篇文章的过程中不断试错，不断学习改进的，所以，本文同样很适合和我一样的初学者。和
Vue的设计理念如出一辙，那就是渐进增强。
上文链接
关于 get 劫持的问题
在上一文中，我们大致讲述了 Vue 关于非侵入式的钥匙，那就是 Object.defineProperty 。
我们可以通过它对数据的获取和设置值进行劫持。
但是，当他们一起组合的时候，就会产生新的问题，我们可以通过下面的例子发现：
let a = {name:'jack'};
Object.defineProperty(a,'name',{
get(){
return '你已经被劫持了!';
},
set(newValue){
console.log('你正在设置值' + newValue);
}
})
a.name = 'bob';
console.log(a.name); // 你已经被劫持了!
此时控制台的输出结果为：
你正在设置值bob
你已经被劫持了
很明显，首先，a.name='bob' ，我们将变量 a 的值，设置为了 bob ，但是下面 console.log(a.name) ，就会默认触发 get 方法，将 a.name 又 return 成了 你已经被劫持了! 。
所以，你会发现无论怎么改变 a.name 的值，最后获取的时候，他都会被强制劫持。
变量中转
但是，如果我们通过一个变量中转下，我们在设置的时候，将新值赋予给中转变量，获取值的时候，直接 return 中转变量，就不会发生上述中的问题了。
let a={name:'jack'};
let temp=null; //中转变量
Object.defineProperty(a,'name',{
get(){
return temp; // 直接 return 中转变量
},
set(newValue){
temp = newValue; // 将新值赋予给中转变量
}
})
a.name='bob';
console.log(a.name); // bob
运用闭包进行封装
有了解决方案之后，我们就可以通过闭包的方式，自行对 Object.defineProperty 进行进一步的封装。
我们定义了一个名为 defineReactive 的方法，大意为定义响应 ，就是通过它来对对象的获取和设置（读和写）做拦截操作。
function defineReactive(obj,key,val) {
Object.defineProperty(obj,key,{
// 可枚举，默认为 false
enumerable:true,
// 属性的描述符能够被改变，或者是删除，默认为 false
configurable:true,
get(){
return val;
},
set(newValue){
val=newValue;
}
})
}
现在的 val ，承担着两个用处，一个是可传入的默认值，一个是作为中转变量。我们可以使用一下这个 defineReactive
let a={};
defineReactive(a,'name','jack');
console.log(a.name); // jack
a.name='bob';
console.log(a.name); // bob
如何给深度对象绑定
这时，新的问题也随即产生了，我们上面的对象就一层，数据结构很简单，但是，实际项目中的对象的数据结构哪会有如此简单，所以，我们也要解决深层次对象的拦截操作问题。
那么，我们就比方说现在给定那么一个对象 a 。
let a = {
b:{
c:20
}
};
很明显，它有三层嵌套。
我们首先要给它的 b 属性绑定上 defineReactive 。此时的代码应该是 defineReactive(a,'b')。第三个默认参数我们就不能填写了，不然此时 b 的值，就会被覆盖掉。
例如我们书写如下代码：
let a = {
b:{
c:20
}
};
defineReactive(a,'b',10)
console.log(a);
可以发现 c 直接被覆盖了。所以，对于深度的对象，不能赋予默认值，不然会覆盖对象本来的属性。
但是，当我们入参两个的时候，也发现由于没有默认值， val 为 undefined 。
let a = {
b:{
c:20
}
};
defineReactive(a,'b')
console.log(a); // undefined
所以，我们在 defineReactive 方法中，需要对入参的个数进行控制，如果入参是两个的时候（没有默认值），直接将 val 赋值为当前层的对象。
function defineReactive(obj,key,val) {
// 判断当前入参个数，两个的话直接返回当前层的对象
if(arguments.length===2){
val = obj[key];
}
Object.defineProperty(obj,key,{
get(){
return val;
},
set(newValue){
val = newValue;
}
})
}
现在执行 defineReactive(a,'b') 就已经没有问题了。
Observer
所以，现在的问题，就是我们需要遍历对象的每一个属性，给他绑定 defineReactive 即可。
let a = {
b:{
c:20
},
d:10
};
我们现在手写一个 Observer 类，专门用来遍历当前层的属性。
class Observer{
constructor(obj){
this.walk(obj);
}
walk(obj){
let keys=Object.keys(obj);
for(let i =0;i<keys.length;i++){
defineReactive(obj,keys[i])
}
}
}
在新建 Observer 实例的时候，就会将传入的对象的第一层全部都遍历，加上 defineReactive 。
为了效果的明显，我们在 defineReactive 方法中输出当前的 key 值。
function defineReactive(obj,key,val) {
console.log(key);
// ...
}
我们来将 a 进行实例化 new Observer(a); , 会输出 b 和 d ，也就是 b 和 d 现在已经是响应式的了。
现在，我们来分析下 new Observer(a); ，它其实主要做了两件事情:
new Observer(a); => defineReactive(a,'b') => defineReactive(a,'d')
我们主要看 defineReactive(a,'b') 的时候， a.b 不就是c么 ， 那么 也就是说obj[key] 就是下一层的值 ，所以，我们给他执行 new Observer(obj[key]) 不就行了，并且，在执行之前，先判断下 obj[key] 是否是对象，是对象就表示还有下一层需要遍历。
function defineReactive(obj,key,val) {
console.log(key);
// 判断当前入参个数，两个的话直接返回当前层的对象
if(arguments.length===2){
val=obj[key];
// 新增的一行代码
typeof val === 'object' && new Observer(val);
}
// ...
}
这种时候，就形成了一种 Observer => walk遍历当前层 => defineReactive => 如果为对象 ?=> Observer => walk遍历当前层 => defineReactive => 如果为对象 ?=> Observer => walk遍历当前层 => defineReactive => 省略...
经过这层循环，我们就能完整遍历每个对象，并且都给它绑定 defineReactive 了。
整体的调用顺序如图：
即使我们改为数组，let a = ['a','b','c','d',{e:{f:100}}]，也毫无问题。
关于属性新增的拦截
现在，对象在初始化的时候，我们的所有属性都已经能完成响应式了。
但是，如果我们执行 a.b.c={m:10} 时，不会触发改变，所以，我们需要在 set 中，同样地，对新修改的对象增加 Observer 实例化。
Object.defineProperty(obj,key,{
// ...
set(newValue){
val=newValue;
typeof val === 'object' && new Observer(val);
}
})
所以最终的代码为：
function defineReactive(obj,key,val) {
console.log(key);
// 判断当前入参个数，两个的话直接返回当前层的对象
if(arguments.length===2){
val=obj[key];
typeof val === 'object' && new Observer(val);
}
Object.defineProperty(obj,key,{
// 可枚举，默认为 false
enumerable:true,
// 属性的描述符能够被改变，或者是删除，默认为 false
configurable:true,
get(){
return val;
},
set(newValue){
val=newValue;
typeof val === 'object' && new Observer(val);
}
})
}
// 遍历对象当前层的所有属性，并且绑定 defineReactive
class Observer{
constructor(obj){
this.walk(obj);
}
walk(obj){
let keys=Object.keys(obj);
for(let i =0;i<keys.length;i++){
defineReactive(obj,keys[i])
}
}
}
下文引荐
【手把手教你搓Vue响应式原理】（三）observe 以及 ob
【手把手教你搓Vue响应式原理】（五） Watcher 与 Dep
