大家好，我是 辉夜真是太可爱啦 。这是我最近在写的【手把手教你搓Vue响应式原理】系列，本文将一步步地为你解开vue响应式原理的面纱。由于本人也是在写这篇文章的过程中不断试错，不断学习改进的，所以，本文同样很适合和我一样的初学者。和
Vue的设计理念如出一辙，那就是渐进增强。
上文链接
前言
在上一文中，我们已经成功将深度对象（好几层的对象）成功遍历，全部绑定了 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,{
// 可枚举，默认为 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])
}
}
}
__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<keys.length;i++){
defineReactive(obj,keys[i])
}
}
}
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;
}
