写在前面,笔记来源于:www.bilibili.com/video/BV1iX… 侵删
创建一个类:
对于这个逻辑,进行分析一下:\
在index.js中,一个对象(obj)被observe()函数调用。这个obj长这样:\
var obj = {
a:{
m:{
n:55555
}
},
b:4
};
=====
在observe.js中的observe()中,这个函数只对对象进行处理。
判断obj对象中是否有__ob__属性,如果有,就拿到这个属性值返回
如果没有,就使用Observe()这个类实例化一个实例对象,再将这个对象返回。
===== 在Observe.js中,这是一个类,类必然拥有构造函数。构造函数接收的是(1.是一个对象2.是一个没有__ob__属性的对象3.假设这个对象名叫valueObj)
拿到对象以后,因为这个对象必然不拥有__ob__属性,因此,使用def()给传递过来的参数添加__ob__属性,属性值就是这次构造函数实例化得到的实例对象。注意,这个属性(__ob__)不可被枚举。
此时的valueObj变成拥有__ob__的对象了。
遍历这个valueObj对象:
对valueObj对象中每一个属性都进行defineReactive(),比方说a和b属性。
在整个逻辑中,反复用到了Object.defineProperty()函数。这个函数在前面有特意写过,在这里就单纯只贴一张图
在defineReactive.js中也是使用该函数将所有遍历得到的属性设置为可枚举的属性。
注意在这里有一个递归但是不完全递归的逻辑
observe.js==>Observe.js==>defineReactive.js==>observe.js
也在下边贴上流程图:
但是需要注意的是,此时obj对象每一个属性a,b,m,n,都拥有了__ob__属性,但是此时这个属性还只是用来进行判断是否拥有__ob__属性的,用来区分是否可以被侦测到(也就是响应式的),但是除此之外没有别的作用,暂时不知道后面这个属性是不是还有别的功能。