- vue3.0计划用Proxy,现简单实现下如何用Proxy实现数据的双向绑定
<body>
<input type="text" v-model="name">
<input type="text" v-model="name">
<script>
let _data = {
name : 'jjx'
}
// Proxy 实现监听数据 _data
let data = new Proxy(_data, {
set(obj, name, val){
obj[name] = val;
//数据改变的时候,去通知视图更新
data2html()
},
get(obj, name){
console.log(obj[name])
return obj[name];
}
})
let inputs = Array.from(document.querySelectorAll('input'))
data2html()
//input 数据中 当用户输入数据的时候,去更新数据
inputs.forEach(item => {
item.oninput = function(){
html2data(this);
}
})
// 实现 数据 ---> 视图
function data2html(){
inputs.forEach(item => {
//获取到凡是 有v-model属性的 input
let name = item.getAttribute('v-model');
// 将 data[name]的值赋值给input的value
item.value = data[name]
})
}
//实现 视图---> 数据
function html2data(otxt){
let name = otxt.getAttribute('v-model');
data[name ] = otxt.value;
}
</script>
</body>