Vue3.0双向绑定核心：Proxy 示例

Vue3.0用Proxy 替代了Object.defineProperty，优化了：无法监听 属性的添加和删除、数组索引和长度的变更。这里只做一个双向绑定的示例代码。体现Vue3.0双向绑定的操作：
1.HTML页面

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;