莫方教程网

现在的前端行情越来越严峻，工作也内卷严重，现在出去面试找工作必问vue3源码，现在一步一步要浅入深来解析vue3源码。

1.先创建一个data对象，使用proxy代理来劫持对象，监听对象的属性。

2.定义一个Set，Set具有唯一性，不会存在重复的函数。代码如下

let activeEffect;
const bucket=new Set();
const data={
    text:'hello world',
}

const obj=new Proxy(data, {
    get(target, key){
        if(activeEffect){
          //收集方法
            bucket.add(activeEffect);
        }
        return target[key];
    },
    set(target, key, value){
        target[key]=value;
				//设置值时执行收集的依赖
        bucket.forEach(fn=>fn());
        return true;
    }
});
function effect(fn) {
    activeEffect = fn;
    fn &&fn();
}

function render() {
    document.body.innerHTML = obj.text;
}
effect(() => {
    console.log('effect')
    render();
});
setTimeout(() => {
    obj.text = 'goodbye world';
}, 1000);

setTimeout(() => {
    obj.noText = 'goodbye world999';
},1000)

我们再最后一行给代理的obj设置一个之前不存在的值，会不会执行打印信息？