Vue3.0用Proxy 替代了Object.defineProperty,优化了:无法监听 属性的添加和删除、数组索引和长度的变更。这里只做一个双向绑定的示例代码。体现Vue3.0双向绑定的操作:
1.HTML页面
<div id="app">
<h3 id="showTxt"></h3>
<input type="text" id="input">
</div>
2.js页面
//获取段落的节点
const showTxt = document.getElementById('showTxt');
//获取输入框节点
const input = document.getElementById('input');
const data = {
text:'hello data'
};
//
let handler = {
set: (target ,prop ,value)=> {
if(prop === 'text'){
target[prop] = value;
showTxt.innerHTML = value;
input.value = value;
return true
}else return false
},
};
//Proxy绑定 , handler不能为null
let myText = new Proxy(data, handler);
//监听输入变化
input.addEventListener('input', (e)=> {
myText.text = e.target.value
});
//初始化
myText.text = data.text;