Vue2的响应式实现,Vue3的响应式实现

Vue2的响应式实现

<input id="username" />
显示输入的值：<div id="userNames"></div>

//实现数据劫持双向绑定
let obj={};
let name="":
                    对象    对象属性
Object.defineproperty(obj,'username',{
        get:function(){
            return name;
        },
        set:function(val){
            document.getElementById('username').value=val;   
            document.getElementById('userNames').indexText=val;    
            name=val;
        }
    }
}

document.getElementById('username').addEventListen('keyup',function(){
    obj.username=event.target.value;
    console.log(obj.username);
})

Vue3的 Reflect的数据映射（object.defineproperty不能声明相同的对象属性否则会报错，reflect可以声明相同的对象属性，只不过比object.defineproperty多了一项可以返回状态允许修改的那一项返回true）

//实现数据劫持双向绑定
let obj={};
let name="":
                    对象    对象属性
Reflect.defineproperty(obj,'username',{
        get:function(){
            return name;
        },
        set:function(val){
            document.getElementById('username').value=val;   
            document.getElementById('userNames').indexText=val;    
            name=val;
        }
    }
}

Reflect.getElementById('username').addEventListen('keyup',function(){
    obj.username=event.target.value;
    console.log(obj.username);
})

vue3的响应式原理雏形 

  let obj={
        name:'小明',
        age:18
    }
//响应式需要捕获到数据的修改
    const p=new Proxy(obj,{
        //源数据   属性
        get(target,propName){
            console.log(`读取P的${propName}属性`);
        //普通函数的默认返回值就是undefined
        //     return target[propName]
            return Reflect.get(target,propName);
        },
        set(target,propName,value){
            console.log(`修改了${propName}属性值为${value}`);
            //捕获到数据将修改后value赋给当前使用obj的p，就是修改obj的值执行修改
            // target[propName]=value;
            //使用反射来操作
            return Reflect.set(target,propName,value);

        },
        //会返回一个boolean值
        deleteProperty(target,propName){
            console.log(`删除P的${propName}的属性`);
            return Reflect.deleteProperty(target,propName)
            // return delete target[propName];
        }
    })