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() 爲了收集該數組的子元素的依賴，如果子元素也是數組，那就遞歸收集