vue源码系列06_实现数组的依赖收集

observer.js

1. 在初始化数据的时候，创建一个数组专用的dep
2. 给每个对象添加一个 ob 属性，主要是用于保存当前实例对象(this)
3. 在 array.js 中在数据改变时，触发数组专用dep的notify()派发更新
4. 修改 defineReactive 方法

export function defineReactive(data, key, value) {
    let childOb = observe(value) // 递归，对data中的对象进行响应式操作，递归实现深度检测
    let dep = new Dep()
    Object.defineProperty(data, key, {
        get() { // 获取值的时候做一些操作
            if(Dep.target){
                // wacher 里面记录dep 也在dep里面记录watcher
                dep.depend()
                // dep.addSub(watcher)
                if(childOb){
                    childOb.dep.depend() // 数组收集当前渲染的watcher
                    dependArray(value) // 收集儿子的依赖
                }
            }
            return value;
        },
        set(newValue) { // 也可以做一些操作
            console.log("设置属性",newValue)
            if (newValue == value) return;
            observe(newValue); //继续劫持用户设置的值，因为用户设置的值有可能是一个对象
            value = newValue;
            // 当属性设置的时候，实现更新
            dep.notify()
        }
    })
}

5. 在array.js 添加 dependArray() 收集儿子的依赖

export function dependArray(value) {
    for (let i = 0; i < value.length; i++) {
        let currentItem = value[i]
        currentItem.__ob__&& currentItem.__ob__.dep.depend()
        if(Array.isArray(currentItem)){
            dependArray(currentItem) // 递归收集依赖
        }
    }
}

总结

1. 数组的依赖收集就是在初始化的时候添加一个 dep(数组专用) 代理，在get中收集到子元素的所有依赖(包含数组)
2. dependArray() 为了收集该数组的子元素的依赖，如果子元素也是数组，那就递归收集