简单的proxy的使用来实现试图和数据的绑定更新proxy 一个用来拦截数据的变化，简单来说就是一个中间层，当我观察到的

proxy 一个用来拦截数据的变化，简单来说就是一个中间层，当我观察到的数据改变的时候，我proxy监听到的数据来做处理，从而不影响到原来数据的改动。以下通过一个demo,来验证一个proxy的神奇，模拟vue中的v-model的一个指令的实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="number">
    <button>获取webworker的内容数据</button>
    <div class="result"></div>
    <div class="listenInputData" id="listenInputData"></div>
    <script>
        
        let btn = document.querySelector("button");
        let input = document.querySelector("input");
        let listenInputData = document.querySelector("#listenInputData");

        const inputObj = {
            value: input.value,
            text: '我文本内容已经发生改变'
        }
        input.addEventListener("input", function () {
            proxyInputData.value = input.value; // 使用 proxy 来更新值
            proxyInputData.text = '你监测到我的文本内容已经发生改变了吗~'
        });
        const proxyInputData = new Proxy(inputObj,{
            get(target,key,receiver){
                return Reflect.get(target,key,receiver);
            },
            set(target,key,value,receiver){
                Reflect.set(target,key,value,receiver);
                console.log(`监听到输入值发生改变: ${key}`);
                if(key === 'value'){
                    listenInputData.innerHTML = `当前输入值: ${value}`; // 
                }
                return true; // 返回 true 表示设置成功
            }
        })
        listenInputData.innerHTML = `当前输入值: ${proxyInputData.value}`;
    </script>
</body>

</html>