1.Vue2.0双向数据绑定的实现原理
ES5：Object.defineProperty
<body>
姓名：<span id="spanName"></span>
<br>
<input type="text" id="inpName">
<script>
let obj = {
name: ''
};
let newObj = {
...obj
};
Object.defineProperty(obj, 'name', {
get() {
return newObj.name;
},
set(val) {
newObj.name = val;
observe();
}
});
function observe() {
spanName.innerHTML = newObj.name;
}
inpName.oninput = function () {
obj.name = this.value;
};
</script>
</body>
2.Vue3.0双向数据绑定的实现原理
ES6：Proxy
<body>
姓名：<span id="spanName"></span>
<br>
<input type="text" id="inpName">
<script>
let obj = {
name: ''
};
obj = new Proxy(obj, {
get(target, prop) {
return target[prop];
},
set(target, prop, value) {
target[prop] = value;
observe();
}
});
function observe() {
spanName.innerHTML = obj.name;
}
inpName.oninput = function () {
obj.name = this.value;
};
</script>
</body>
