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

前言

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

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

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

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

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

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

整体的调用顺序如图：

上文代码

上文最终的代码如下：

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,{// 可枚举，默认为 falseenumerable:true,// 属性的描述符能够被改变，或者是删除，默认为 falseconfigurable: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])}}
}
复制代码

`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-builtinsif(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,{// 可枚举，默认为 falseenumerable:true,// 属性的描述符能够被改变，或者是删除，默认为 falseconfigurable: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<keys.length;i++){defineReactive(obj,keys[i])}}
}function observe(value) {if(typeof value !== 'object') return;let ob;// eslint-disable-next-line no-prototype-builtinsif(value.hasOwnProperty('__ob__') && value.__ob__ instanceof Observer){ob=value.__ob__;}else{ob = new Observer(value);}return ob;
}