<!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="text" id="input">
    <p id="text">hello world</p>

    <script>
        let input = document.getElementById('input');
        let text = document.getElementById('text');

        let obj = {};

        // Proxy 第一个参数 要拦截的目标对象，这里指 obj, 第二个参数 处理程序对象 这里直接 {} 并定义 get、set 捕获器
        let proxy = new Proxy(obj, { 
            // get 第一个参数 目标对象，这里指 obj，第二个参数 属性，这里指 val
            get(target, property){
                return target[property]; // 返回值无限制
            },
            // set 前两个参数 同 get， 第三个参数是 要设置的值
            set(target, property, value){ 
                target[property] = value; // 相当于 obj[val] = 5;
                text.innerText = target[property]; // 把值 赋值给 text
                return; // set 的返回值 true 表示成功 false 表示失败 
            }
            
        })

        /*
        默认先把 text 值 赋值给 input
        */
        proxy.val = text.innerText;
        input.value = proxy.val;

        // input 输入时触发
        input.addEventListener('input', function(){
            proxy.val = this.value; // 给 proxy.val 赋值 会调用 set 捕获器
        })
    </script>
</body>
</html>

 小小实习生，大佬请赐教