vue2.0的双向绑定就是基Object.defineProperty，而vue3.0已将Object.defineProperty替换成了Proxy，vue做了这层改变和他们两的特性息息相关。
<body>
hello,world
<input type="text" id="model">
<p id="word"></p>
</body>
<script>
const model = document.getElementById("model")
const word = document.getElementById("word")
var obj= {};
Object.defineProperty(obj, "model", {
get: function() {
return model.value
},
set: function(newValue) {
model.value = newValue
word.innerHTML = newValue
}
})
document.addEventListener("keyup",function(e){
obj.model = e.target.value
})
</script>
<body>
hello,world
<input type="text" id="model">
<p id="word"></p>
</body>
<script>
const model = document.getElementById("model")
const word = document.getElementById("word")
var obj= {};
const newObj = new Proxy(obj, {
get: function(target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set: function(target, key, value, receiver) {
console.log('setting',target, key, value, receiver);
if (key === "text") {
model.value = value;
word.innerHTML = value;
}
return Reflect.set(target, key, value, receiver);
}
});
model.addEventListener("keyup",function(e){
newObj.text = e.target.value
})
</script>
vue2.0的双向绑定就是基Object.defineProperty，而vue3.0已将Object.defineProperty替换成了Proxy，vue做了这层改变和他们两的特性息息相关。
Object.defineProperty问题
Proxy特点
用Object.defineProperty手写一个数据双向绑定案例
Proxy例子