V-model 双向数据绑定原理

vue 2.0     Object.defineProperty

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的

let obj={name:''};

//深克隆    JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

let newObj=JSON.parse(JSON.stringify(obj)); 

Object.defineProperty(obj,'name',{

    get(){return newObj.name;},

    set(val){

        if(val === newObj.name) return;

        newObj.name=val;

        observer();

    }    

});

function observer(){

    spanName.innerHTML =obj.name;

    inpName.value=obj.name;

 }

inpName.oninput=function(){

    obj.name=this.value;

}

vue 3.0      Proxy

let obj={};

obj=new Proxy(obj,{

    get(target,prop){

        return target[prop];

    },

    set(target,prop,value){

        target[prop] =value;

    }

})