使用 JavaScript Proxy 实现简单的数据绑定

scorpio_h

于 2020-03-03 14:48:48 发布

阅读量824

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： proxy javascript vue3.0 数据绑定

本文链接：https://blog.youkuaiyun.com/scorpio_h/article/details/104631871

javascript 专栏收录该内容

28 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>proxy</title>
</head>
<body>
  <h1>使用Proxy 和 Reflect 实现双向数据绑定</h1>
  <input type="text" id="input">
  <h2>您输入的内容是： <i id="txt"></i></h2>
  <script>
    //获取dom元素
    let oInput = document.getElementById("input");
    let oTxt = document.getElementById("txt");

    //初始化代理对象
    let obj = {};
    //给obj增加代理对象
    let newProxy = new Proxy(obj, {
      get: (target, key, recevier) => {
        return Reflect.get(target, key, recevier);
      },
      set: (target, key, value, recevier) => {
        //监听newProxy是否有新的变化
        if (key == "text") {
          oTxt.innerHTML = value;
        }
        //将变化反射回原有对象
        return Reflect.set(target, key, value, recevier);
      }
    })
    //监听input输入事件
    oInput.addEventListener("keyup", (e) => {
      //修改代理对象的值
      newProxy.text = e.target.value;
    })
  </script>
</body>
</html>