VUE - MVVM - part2 - Dep

时间 2019-11-06

标签 vue mvvm part2 dep 繁體版

原文原文链接

看这篇以前，若是没看过 step1 先移步看实现 VUE 中 MVVM - step1 - defineProperty。vue

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

肯定功能

首先咱们能够先肯定这个类下的属性，以及一些功能：github

类下属性：数组

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）的实例。一样的，在取值时收集依赖，在设置值（当值发生变化）时触发依赖。this

因为依赖的处理由 Dep 的实例管理了，这里仅仅调用一下相关方法便可。code

接下来试一试效果：blog

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

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

Dep 这个类将监听属性和处理依赖进行了解耦，可是却没有彻底解耦，在触发依赖的时候，仍是得传新旧值。
上面代码中 Dep 中定义的 removeSub 在代码中并无用到，由于 Dep 的实例是在 defineReactive 函数的做用域中，外部并不能直接调用，而删除依赖确定是在外部的环境中，也就是说即便咱们将代码改为这样，咱们仍是不能直接取删除已经没用的依赖。

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

如下 ES6 语法下的 Dep ，Vue 源码中差很少就这样

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

点击查看相关代码

VUE - MVVM - part2 - Dep

肯定功能

实现

系列文章地址