简单实现 VUE 中 MVVM - step5 - Observe

看这篇之前，如果没看过之前的文章先移步看

1. 简单实现 VUE 中 MVVM - step1 - defineProperty
2. 简单实现 VUE 中 MVVM - step2 - Dep
3. 简单实现 VUE 中 MVVM - step3 - Watcher
4. 简单实现 VUE 中 MVVM - step4 - 优化Watcher

回顾

在 step4 中，我们大致实现了一个 MVVM 的框架，由3个部分组成，

1. defineReactive 控制了对象属性，使变为可监听结构
2. Dep 收集管理依赖
3. Watcher 一个抽象的依赖

defineReactive 和 Dep 改造了对象下的某个属性，将目标变成了观察者模式中的目标，当目标发生变化时，会调用调度观察者；

Watcher 就是一个具体的观察者，会注册到目标中。

之前的代码实现了观察者模式，使得数据的变化得以响应，但是还是有两个需要优化的地方:

1. 如果我们想让对象的属性都得以响应，那我们必须对对象下的所有属性进行遍历，依次调用 defineReactive 这不是很方便
2. 代码都在一个文件中，不利于管理

解决

问题2

先解决第二个问题，我们仅仅需要把代码进行划分即可，然后用 webpack/babel 打包即可，当然这里就不说如何去配置 webpack ，使用 webpack/babel 我们就可以使用 ES6 的语法和模块系统了。

但是为了偷懒，我把代码直接放在 node 环境中执行了，但是 import 语法需要特定的 node 版本，我这里使用的是 8.11.1(版本网上都应该是支持的)，同时需要特定的文件后缀（.mjs）和命令 node --experimental-modules xxx.mjs。

具体代码

执行方式进入到 step5 的目录下，命令行运行 node --experimental-modules test.mjs 即可。

当然你也可以用 webpack/babel 进行打包和转码，然后放到浏览器上运行即可。

问题1

问题1，我们需要做的仅仅是实现一个方法进行遍历对象属性即可。我们把这个过程抽象成一个对象 Observe 。至于为什么要把这个过程抽象成一个对象，后面会说。

注： 由于是在 node 环境下运行代码，这里就直接用 ES6 的语法了。同样的我把别的模块也用 ES6 语法写了一遍。

export class Observer {

    constructor(value) {
        this.value = value
        this.walk(value)
        // 标志这个对象已经被遍历过，同时保存 Observer
        Object.defineProperty(value, '__ob__', {
            value: this,
            enumerable: false,
            writable: true,
            configurable: true
        })
    }

    walk(obj) {
        const keys = Object.keys(obj)
        for (let i = 0; i < keys.length; i++) {
            defineReactive(obj, keys[i], obj[keys[i]])
        }
    }

}

从代码可以看出，这个类在实例化的时候自动遍历了传入参数下的所有属性（value），并把每个属性都应用了 defineReactive 。
为了确保传入的值为对象，我们再写一个方法来判断。

export function observe (value) {
    // 确保 observe 为一个对象
    if (typeof value !== 'object') {
        return
    }
    let ob
    // 如果对象下有 Observer 则不需要再次生成 Observer
    if (value.hasOwnProperty('__ob__') && value.__ob__ instanceof Observer) {
        ob = value.__ob__
    } else if (Object.isExtensible(value)) {
        ob = new Observer(value)
    }
    return ob
}

函数返回该对象的 Observer 实例，这里判断了如果该对象下已经有 Observer 实例，则直接返回，不再去生产 Observer 实例。这就确保了一个对象下的 Observer 实例仅被实例化一次。

上面代码实现了对某个对象下所有属性的转化，但是如果对象下的某个属性是对象呢？
所以我们还需改造一下 defineReactive 具体代码为：

export function defineReactive(object, key, value) {
    let dep = new Dep()
    // 遍历 value 下的属性，由于在 observe 中已经判断是否为对象，这里就不判断了
    observe(value)
    Object.defineProperty(object, key, {
        configurable: true,
        enumerable: true,
        get: function () {
            if (Dep.target) {
                dep.addSub(Dep.target)
                Dep.target.addDep(dep)
            }
            return value
        },
        set: function (newValue) {
            if (newValue !== value) {
                value = newValue
                dep.notify()
            }
        }
    })
}

ok 我们来测试下

import Watcher from './Watcher'
import {observe} from "./Observe"

let object = {
    num1: 1,
    num2: 1,
    objectTest: {
        num3: 1
    }
}

observe(object)

let watcher = new Watcher(object, function () {
    return this.num1 + this.num2 + this.objectTest.num3
}, function (newValue, oldValue) {
    console.log(`监听函数，${object.num1} + ${object.num2} + ${object.objectTest.num3} = ${newValue}`)
})

object.num1 = 2
// 监听函数，2 + 1 + 1 = 4
object.objectTest.num3 = 2
// 监听函数，2 + 1 + 2 = 5

当然为了更好的了解这个过程，最好把 step5 目录中的代码拉下来一起看。至于之前实现的功能这里就不专门写测试了。

最后

最后解释下为什么要把遍历对象属性这个过程抽象成一个对象

• 对象在 js 下存放是是引用，也就是说有可能几个对象下的某个属性是同一个对象下的引用，如下

  let obj1 = {num1: 1}
  let obj2 = {obj: obj1}
  let obj3 = {obj: obj1}

  如果我们抽象成对象，而仅仅是函数调用的话，那么 obj1 这个对象就会遍历两次，而抽象成一个对象的话，我们可以把这个对象保存在 obj1 下（__ob__ 属性），遍历的时候判断一下就好。

• 当然解决上面问题我们也可以在 obj1 下设置一个标志位即可，但是这个对象在之后会有特殊的用途，先这样写吧。（与数组和 Vue.set 有关）

在代码中我为 Dep 和 Watch 添加了 id 这个暂时用不到，先加上。

点击查看相关代码

更多内容，可以访问http://blog.acohome.cn