js：使用proxy代理模拟vue双向绑定

ai酸的博文

已于 2023-01-02 19:05:15 修改

阅读量255

点赞数

分类专栏：前端文章标签： javascript 前端

于 2023-01-02 19:05:00 首次发布

本文链接：https://blog.csdn.net/weixin_44173943/article/details/128523647

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

效果图

初始值：
变化后

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 v-bind="name">123</h1>
    <input type="text" v-model="name" />
    <input type="text" v-model="name" />

    <script>
      // 绑定值
      function getValue(key) {
        const directives = ["bind", "model"];
        directives.forEach((directive) => {
          document
            .querySelectorAll(`[v-${directive}="${key}"]`)
            .forEach((item) => {
              switch (directive) {
                case "bind":
                  item.innerHTML = proxy[key];
                  break;
                case "model":
                  item.value = proxy[key];
                  break;
                default:
                  break;
              }
            });
        });
      }

      // 代理
      const proxy = new Proxy(
        { name: "初始值" },
        {
          get(obj, key) {
            return obj[key];
          },
          set(obj, key, value) {
            obj[key] = value;
            getValue(key);
          },
        }
      );
      // 初始化值
      getValue("name");
      // 绑定change事件
      document.querySelectorAll(`[v-model="name"]`).forEach((item) => {
        item.addEventListener("keyup", () => {
          proxy.name = item.value;
        });
      });
    </script>
  </body>
</html>