【手把手教你搓Vue响应式原理】（二）深度监测对象全部属性

大家好，我是 辉夜真是太可爱啦 。这是我最近在写的【手把手教你搓Vue响应式原理】系列，本文将一步步地为你解开vue响应式原理的面纱。由于本人也是在写这篇文章的过程中不断试错，不断学习改进的，所以，本文同样很适合和我一样的初学者。和 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); 

image.png

可以发现 c 直接被覆盖了。所以，对于深度的对象，不能赋予默认值，不然会覆盖对象本来的属性。

但是，当我们入参两个的时候，也发现由于没有默认值， val 为 undefined 。

let a = {
  b:{
    c:20
  }
};

defineReactive(a,'b')
console.log(a);     // undefined

image.png

所以，我们在 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

在新建 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 => 省略...

image.png

经过这层循环，我们就能完整遍历每个对象，并且都给它绑定 defineReactive 了。

整体的调用顺序如图：

image.png

即使我们改为数组，let a = ['a','b','c','d',{e:{f:100}}]，也毫无问题。

image.png

关于属性新增的拦截

现在，对象在初始化的时候，我们的所有属性都已经能完成响应式了。

但是，如果我们执行 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

文章参考

【尚硅谷】Vue源码解析之数据响应式原理