[聚合文章] 一步一步分析vue之observe

上一期，本我们讲了 __data 这个vue的属性是怎么一回事，本期，我们将用到vue的(2.5.9)版本，让我们了解一下 observe 让我们看看observe都包含什么成员

observe = {
    value : "",
    dep : new Dep,
    vmCount : 0
}

那么 Dep 又是什么东西呢。

dep = {
    id : uid++,
    subs : []
}

好，让我们回到observe最开始出现的地方。在代码的3360行。

接着，按f11跟进去，我们可以看到，程序用 new Observer(value)

初始化了value,如下图所示。

接着按f11跟进去，我们看看初始化Observer做了些什么事情？我们可以看到在程序的 874 行，用 def(value, '__ob__', this); ,用def对value和__Observer__进行处理。不用说，这肯定不是函数式的了 = =。让我们继续跟进去，看看def对value做了什么事情？按f11跟进去，如下图所示。可以看到，不出所料，又是用了 Object.defineProperty 给这个value定义了一个 __ob__ 这个属性。这个属性在分析__data章节里给了个可以查阅的链接。但是，重点的是: 我们知道，在代码的initData函数里,data=_data,而__ob__的value又被定义为value，也就是data,所以如果_data的值发生改变，data的值会发生变化,__ob__的值也会发生变化，会相应的触发getter/setter 。调用完def这个函数，接下来该调用 this.walk 了，如下图。this.walk接收的是一个刚刚赋值完__ob__属性的value属性。同样，让我们跟进去，看看究竟对value做了什么，如下图。这里，obj即使我们刚才所传的value.可以看到，先用Object.keys取到的obj所有的key，然后用了一个for循环，对obj的每个key都调用 defineReactive(obj, keys[i], obj[keys[i]]); ,哈哈，既然它对每个keys[i]，obj[keys[i]],都调用了这个 defineReactive 方法，我们不妨跟进去看看~~~。如下图。

哇！参数看着好高大上 = = 有木有 （先写这些，剩下的等明天再写。）