现在的前端行情越来越严峻,工作也内卷严重,现在出去面试找工作必问vue3源码,现在一步一步要浅入深来解析vue3源码。
1.先创建一个data对象,使用proxy代理来劫持对象,监听对象的属性。
2.定义一个Set,Set具有唯一性,不会存在重复的函数。代码如下
Bash
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设置一个之前不存在的值,会不会执行打印信息?