3

看这篇之前,如果没看过 step1 先移步看 实现 VUE 中 MVVM - step1 - defineProperty

在上一篇我们大概实现了,Vue 中的依赖收集和触发,但我们仅仅是将依赖维护在一个内置数组中,这样做虽然容易理解,但毕竟不好维护,为了更容易的维护这些依赖,我们来实现一个维护依赖的类。

确定功能

首先我们可以先确定这个类下的属性,以及一些功能:

类下属性:

  • target 函数,用于存放需要添加的依赖

实例下属性及方法:

  • subs/Array 用于存放依赖
  • addSub/Function 用于添加依赖
  • removeSub/Function 用于移除依赖
  • notify/Function 用于执行依赖

实现

考虑到直接放在浏览器上执行,所以直接用 ES5 的类写法。

let Dep = function(){

    // 实例属性
    this.subs = []
    
    // 实例方法
    this.addSub = function(sub){
        this.subs.push(sub)
    }
    
    this.removeSub = function(sub){
        const index = this.subs.indexOf(item)
        if (index > -1) {
            this.subs.splice(index, 1)
        }
    }
    
    this.notify = function(newValue, oldVaule){
        this.subs.forEach(fnc=>fnc(newValue, oldVaule))
    }
}

// 类属性
Dep.target = null

好了,现在我们拥有了一个管理依赖的类(这里将依赖简化为一个方法),现在我们就可以动手来改一下之前的代码了。

let defineReactive = function(object, key, value){
    let dep = new Dep()
    Object.defineProperty(object, key, {
        configurable: true,
        enumerable: true,
        get: function(){
            if(Dep.target){
                dep.addSub(Dep.target)
            }
            return value
        },
        set: function(newValue){
            if(newValue != value){
                dep.notify(newValue, value)
            }
            value = newValue
        }
    })
}

可以发现,之前我们用来存放依赖的数组变成了一个依赖管理(Dep)的实例。同样的,在取值时收集依赖,在设置值(当值发生变化)时触发依赖。

由于依赖的处理由 Dep 的实例管理了,这里仅仅调用一下相关方法即可。

接下来试一试效果:

let object = {}
defineReactive(object, 'test', 'test')
Dep.target = function(newValue, oldValue){
    console.log('我被添加进去了,新的值是:' + newValue)
}
object.test
// test

Dep.target = null
object.test = 'test2'
// 我被添加进去了,新的值是:test2

Dep.target = function(newValue, oldValue){
    console.log('添加第二个函数,新的值是:' + newValue)
}
object.test
// test

Dep.target = null
object.test = 'test3'
// 我被添加进去了,新的值是:test3
// 添加第二个函数,新的值是:test3

但是上面的代码暴露了几个问题

  1. Dep 这个类将监听属性和处理依赖进行了解耦,但是却没有完全解耦,在触发依赖的时候,还是得传新旧值。
  2. 上面代码中 Dep 中定义的 removeSub 在代码中并没有用到,因为 Dep 的实例是在 defineReactive 函数的作用域中,外部并不能直接调用,而删除依赖肯定是在外部的环境中,也就是说即使我们将代码改成这样,我们还是不能直接取删除已经没用的依赖。

Vue 中实现了一个 Watcher 的类来处理以上两个问题,之后再说。

以下 ES6 语法下的 DepVue 源码中差不多就这样

class Dep {

    constructor() {
        this.subs = []
    }

    addSub(sub) {
        this.subs.push(sub)
    }

    removeSub(sub) {
        const index = this.subs.indexOf(item)
        if (index > -1) {
            this.subs.splice(index, 1)
        }
    }

    notify() {
        this.subs.forEach(fnc=>fnc(oldValue, newValue))
    }
}

Dep.target = null

点击查看相关代码

系列文章地址

  1. VUE - MVVM - part1 - defineProperty
  2. VUE - MVVM - part2 - Dep
  3. VUE - MVVM - part3 - Watcher
  4. VUE - MVVM - part4 - 优化Watcher
  5. VUE - MVVM - part5 - Observe
  6. VUE - MVVM - part6 - Array
  7. VUE - MVVM - part7 - Event
  8. VUE - MVVM - part8 - 优化Event
  9. VUE - MVVM - part9 - Vue
  10. VUE - MVVM - part10 - Computed
  11. VUE - MVVM - part11 - Extend
  12. VUE - MVVM - part12 - props
  13. VUE - MVVM - part13 - inject & 总结

aco
1k 声望139 粉丝

出卖技术,买糖吃。