Vue2的数据劫持,Vue3的数据劫持

Vue2的Object.defineproperty的数据劫持 

<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的数据映射

//实现数据劫持双向绑定
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);
})