美文网首页
学习vue3 proxy

学习vue3 proxy

作者: 人穷脸丑小前端 | 来源:发表于2020-03-12 12:03 被阅读0次

vue3的数据响应用了proxy的方式,所有特来实验一下下。

let Watcher=function (obj,setFunc,getFunc) {
        let handler={
            get(target,property,receiver){
                let val=Reflect.get(target, property, receiver);
                getFunc(property,val);
                if(typeof val==='object'){
                    return Watcher(val,setFunc,getFunc);
                }else{
                    return val
                }
            },
            set(target,property,value,receiver){
                let old=Reflect.get(target, property, receiver);
                if(!Reflect.has(target,property)||old!==value){
                    setFunc(property,value,old);
                }
                return Reflect.set(target, property, value,receiver)
            }
        };
        return new Proxy(obj,handler)
    };
    let person=Watcher({name:'张三',hobby:{cheese:true}},function (key,newVal,oldVal) {
        console.log(key,newVal,oldVal)
    },function (key,val) {
        console.log(key,val)
    });
    // person.name='李四';
    //person.hobby.cheese=false;
    // console.log(person.hobby)
    // person.age=23;

相关文章

网友评论

      本文标题:学习vue3 proxy

      本文链接:https://www.haomeiwen.com/subject/uzxujhtx.html