莫方教程网

专业程序员编程教程与实战案例分享

vue3源码系列解析(一)(vue源码分析视频教程)

现在的前端行情越来越严峻,工作也内卷严重,现在出去面试找工作必问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设置一个之前不存在的值,会不会执行打印信息?

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言