vue2与vue3的双向绑定写法不同 vue使用Object.defineProperty来劫持对象属性 而vue3使用Proxy代理来实现双向绑定。
vue2:
<div class="data"></div>
<label>vue2:</label> <input type="text" class="dataInput" />
var data={}
Object.defineProperty(data,"value",{
get(){
return this._value //返回一个私有属性_value
},
set(value){
document.querySelector(".data").innerText = value; //当data.value改变时候 将结果填入html中
}
})
//监听输入 data.value改变为输入的值
document.querySelector(".dataInput").oninput = (e) => {
data.value = e.target.value;
};
Object.defineProperty()这个方法是直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象,相当于劫持对象属性,在里面可以定义settter与getter寄存器属性,使用get与set进行操作,这样我们就实现了vue2的双向绑定
vue3的双向绑定原理与vue2的差不多 不过使用Proxy代理来写的,他俩的区别是Object.defineProperty要一个一个属性定义set与get 但是Proxy可以定义一个对象所有属性的get与set
vue3:
<div class="data2"></div>
<label>vue3:</label> <input type="text" class="data2Input" />
var data2 = {};
data2 = new Proxy(data2, {
get(target, key) {
return target[key];
},
set(target, key, value) {
document.querySelector(".data2").innerText = value;
},
});
document.querySelector(".data2Input").oninput = (e) => {
data2.name = e.target.value;
};
这样我们就实现了vue2与vue3的双向绑定