JS_VUE响应式数据原理

代码部分

<p>
    <!-- input 未设置默认值 -->
    <input placeholder="输入任何值" id="input">
</p>
<p>
    <span>您输入了：</span>
    <span id="result"></span>
</p>
<p>
    <button id="getValue">读取值</button>
</p>
<script>
    const input = document.querySelector('#input');
    const result = document.querySelector('#result');
    const getValue = document.querySelector('#getValue');

    // 创建代理, 设置 object的get和set方法
    const proxy = new Proxy({
        value: ''
    }, {
        set(target, prop, value) {
            target.value = value;

          // set的通知设置input和span值
            result.innerText = value;
            input.value = value;
        },
        get(target) {
            alert('刚刚提取了值：' + target.value);
            return target.value;
        }
    });
    input.addEventListener('input', e => {
        proxy.value = e.target.value;
    });

    // 给 proxy 赋值 并同步到input
    proxy.value = '周明博客：zekibu.im';

      // 读取值
    getValue.addEventListener('click',e=>{
      console.log(proxy.value);
    });
</script>

实现效果