01-响应式源码分析

响应式原理

vue2.0 使用了 Object.defineProterty 将data中的属性遍历并转化为getter 和 setter, 并且在getter中将使用数据的上下文进行一次收集，我们称之为依赖收集。

而在setter中就会触发依赖更新的操作，让在模板中可能会有多处随该依赖变化，所以我们将所有地方都收集起来，等待更新的时候进行一次批量操作。

vue3.0 使用了proxy对data进行代理，通过代理来对它进行依赖收集和更新操作

DETAILS

// 简易实现
let x, y;

let f = n => n * 100 + 200;

let active;

let onXchanged = function (cb) {
    active = cb;
    active();
    active = null;
}

class Dep {
    constructor(){
        this.deps = new Set();
    }
    // 收集依赖
    depend(){
        if (active) {
            this.deps.add(active)
        }
    }
    // 执行依赖
    notify(){
        this.deps.forEach(dep => dep())
    }
}

let ref = initValue => {
    let value = initValue;
    let deps = new Dep();
    return Object.defineProperty({}, 'value',{
        get(){
            deps.depend();
            return value;
        },
        set(newValue){
            value = newValue;
            deps.notify();
        }
        
    })
}

x = ref(1);

onXchanged(() => {
    y = f(x.value)
    console.log(y);
})

x.value = 2;
x.value = 3;

参考文献

官网-Object.defineProperty (opens new window)
官网-响应式原理 (opens new window)
参考 (opens new window)