实现一个简易vue2双向绑定
利用Object.defineProperty的get()和set()方法实现数据改变驱动视图改变或者视图改变驱动数据改变。
在数据赋值时,进入set方法中对数据进行劫持,存储在一个变量中,同时在set内也可以对dom进行赋值。当获取属性值时进入get方法把存储的变量值return出去。
<body>
<p id="pid"></p>
<input type="text" id="inputid">
<button onclick="updatamsg('3')">3</button> <button onclick="updatamsg('36')">36</button> <button onclick="updatamsg('333')">333</button> <button onclick="updatamsg('66')">66</button>
</body>
<script>
var a={
msg:""
}
let pel=document.getElementById('pid')
let inputel=document.getElementById('inputid')
let value = ""
Object.defineProperty(a,"msg",{
get(){
console.log('get')
return value
},
set(newvalue){
console.log('set')
value = newvalue
pel.innerHTML =newvalue
inputel.value =newvalue
}
})
inputel.oninput=function(){
a.msg = inputel.value
console.log(a.msg)
}
function updatamsg(e){
a.msg =e
}
</script>```