Vue2.0双向绑定的实现：
关键：Object.defineProperty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2.0 defineProperty</title>
</head>
<body>
<span id="spanName">姓名</span><br/>
<input type="text" id="inpName">
<script>
let obj = {
name:''
};
// model => view 实现
let newObj = JSON.parse(JSON.stringify(obj));//深拷贝一个对象
//此处需要深拷贝一个对象是因为如果使用原来的对象，在执行get方法时，又会监听obj对象，会死循环
//defineProperty(对象，对象属性，方法)
Object.defineProperty(obj,'name',{
get(){
//拿到这个属性值
return newObj.name;
},
set(val) {
//如果对象的属性值没有改变、就不用继续执行
if (val === newObj.name ) return;
newObj.name= val;
observer();//触发值的更新
}
});
//改变view的值
function observer() {
spanName.innerHTML = obj.name;//在span中添加obj的name的内容
inpName.value = obj.name;//把input输入的值赋给obj的name属性
}
setTimeout(()=>{
obj.name = "syq";
},3000)
//view => model 实现
inpName.oninput = function () {
obj.name = this.value;
}
</script>
</body>
</html>总结：Vue2.0使用defineProperty方法、被监听的对象需要进行一次深拷贝。
Vue3.0双向绑定的实现：
关键：ES6新特性 ：Proxy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue3.0</title>
</head>
<body>
<span id="spanName">姓名</span><br/>
<input id="inpName" type="text">
<script>
let obj = {}
//新建一个Proxy实例监听obj对象
obj = new Proxy(obj,{
get(target,prop){
return target[prop];
},
set(target, prop, value) {
target[prop] = value;
observer();
}
});
function observer() {
spanName.innerHTML=obj.name;
inpName.value = obj.name;
}
setTimeout(()=>{
obj.name = 'xxx'
},3000);
inpName.oninput = function () {
obj.name = this.value;
}
</script>
</body>
</html>文中有任何疑问或者错误都可以提出。谢谢