【手把手教你搓Vue响应式原理】（三）observe 以及 __ob__

大家好，我是 辉夜真是太可爱啦 。这是我最近在写的【手把手教你搓Vue响应式原理】系列，本文将一步步地为你解开vue响应式原理的面纱。由于本人也是在写这篇文章的过程中不断试错，不断学习改进的，所以，本文同样很适合和我一样的初学者。和 Vue 的设计理念如出一辙，那就是渐进增强。

上文链接

【手把手教你搓Vue响应式原理】（一）初识Vue响应式

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

前言

在上一文中，我们已经成功将深度对象（好几层的对象）成功遍历，全部绑定了 defineReactive ，也就是全部弄成了响应式对象。

虽然上述功能已经基本实现了对象的成功遍历，但是，在 Vue 的源码中，在我们遍历对象的同时，会将 new Observer() 创建的实例赋值到 __ob__ 属性添加到每一个对象中。

这篇文章主要对标源码，新增了 __ob__ 属性，以及 observe 入口方法，相当于是对标源码，更规范地书写响应式。

这个 __ob__ 属性，在vue使用中大家也可能有所眼熟，这篇文章本意也在于更规范地书写响应式。

并且，由于少了一个 observe 入口方法，也是为了上一文中关于遍历对象添加 defineProperty 的写法更方便能被大家理解。

我们会将 __ob__ 放在 Observer 中，并且，将判断是否是对象放在 observe 中，以及是否设置了 __ob__ 属性，将 observe 作为新的入口方法。

整体的调用顺序如图：

image.png

上文代码

上文最终的代码如下：

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

__ob__

由于要遍历添加 __ob__， 所以，我们要先改写 Observer 类，在构造函数中，新增对于 __ob__ 属性的构建。

class Observer{
  constructor(obj){
    Object.defineProperty(obj,'__ob__',{
      value:this,
      //这个属性仅仅保存 Observer 实例，所以不需要遍历
      enumerable:false
    })
    this.walk(obj);
  }
  // ...
}

当然，我们可以对上面的代码进行一定的封装。

function def(obj,key,value,enumerable) {
  Object.defineProperty(obj,key,{
    value,
    enumerable
  })
}

// 遍历对象当前层的所有属性，并且绑定 defineReactive
class Observer{
  constructor(obj){
    def(obj,'__ob__',this,false)
    this.walk(obj);
  }
  // ...
}

observe

既然现在有了 __ob__ 属性，我们可以根据它是否有 __ob__ 属性来判断它是否 new Observer 实例化过，而且可以将是否是对象的判断放在 observe 方法中，将它作为入口文件。

现在的执行顺序应该是 observe => new Observe => defineReactive

function observe(value) {
  if(typeof value !== 'object') return;
  let ob;
  // eslint-disable-next-line no-prototype-builtins
  if(value.hasOwnProperty('__ob__') && value.__ob__ instanceof Observer){
    ob=value.__ob__;
  }else{
    ob = new Observer(value);
  }
  return ob;
}

由于我们已经将是否对象的判断放入了 observe 中，所以，需要将之前的 typeof val === 'object' && new Observer(val); 改为 observe(val)。

所以，最终的代码如下：

function defineReactive(obj,key,val) {
  console.log(key);
  // 判断当前入参个数，两个的话直接返回当前层的对象
  if(arguments.length===2){
    val=obj[key];
    observe(val)
  }
  Object.defineProperty(obj,key,{
    // 可枚举，默认为 false
    enumerable:true,
    // 属性的描述符能够被改变，或者是删除，默认为 false
    configurable:true,
    get(){
      return val;
    },
    set(newValue){
      val=newValue;
      observe(val)
    }
  })
}

function def(obj,key,value,enumerable) {
  Object.defineProperty(obj,key,{
    value,
    //这个属性仅仅保存 Observer 实例，所以不需要遍历
    enumerable
  })
}

// 遍历对象当前层的所有属性，并且绑定 defineReactive
class Observer{
  constructor(obj){
    def(obj,'__ob__',this,false)
    this.walk(obj);
  }
  walk(obj){
    let keys=Object.keys(obj);
    for(let i =0;i

下文引荐

【手把手教你搓Vue响应式原理】（四） 数组的响应式处理

【手把手教你搓Vue响应式原理】（五） Watcher 与 Dep