vue2.0双向绑定简易实现。
<body>
<input type="text" id="input">
<p id="p"></p>
<script type="text/javascript">
var input =document.getElementById('input')
var p=document.getElementById('p')
var obj={}
Object.defineProperty(obj,'name',{
set:function(val){
input.value=val
p.innerHTML=val
},
get:function () {
return val
}
})
input.addEventListener('input',function(e){
obj.name=e.target.value
})
</script>
</body>效果如下：
vue3则使用proxy实现双向绑定。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="input">
<div id="txt"></div>
</body>
<script>
let oInput=document.getElementById('input');
let oTxt=document.getElementById('txt');
let obj={};
// obj添加代理对象
let newProxy=new Proxy(obj,{
get:(target,key,recevier)=>{
// Reflect获取目标对象的行为，类似Object，更易读，和proxy方法对应。
return Reflect.get(target,key,recevier);
},
set:(target,key,value,recevier)=>{
console.log(target,key,recevier);
// 监听newProxy变化
if (key=="text") {
oTxt.innerHTML=value;
}
// 变化反射回原对象
return Reflect.set(target,key,value,recevier);
}
})
// 监听输入事件
oInput.addEventListener("keyup",(e)=>{
// 修改代理对象值
newProxy.text=e.target.value;
})
</script>
</html>
效果为：
