使用proxy模拟一个基础的vue3响应式ref()

最新推荐文章于 2024-08-29 14:26:44 发布

一天只码五十行

最新推荐文章于 2024-08-29 14:26:44 发布

阅读量319

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45820271/article/details/139630936

版权

一、proxy简介

proxy是ES6提供的一个操作对象的API，通过创建一个对象代理来拦截和自定义对象的各种基本操作。

二、使用proxy实现一个基本的响应式数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>proxy使用</title>
  </head>
  <body>
    <button id="updateButton">点击+1</button>
    <div id="message"></div>
    <script>
      // 创建一个对象
      const obj = {
        counter: 0,
      };
      // 使用Proxy创建响应式数据
      const number = new Proxy(obj, {
        get(target, key) {
          return target[key];
        },
        set(target, key, value) {
          target[key] = value;
          updateNum(); // 更新显示的计数器值
          return true;
        },
      });

      // 初始化显示
      const updateNum = () => {
        document.getElementById("message").innerText = number.counter;
      };

      // 绑定按钮点击事件
      document.getElementById("updateButton").addEventListener("click", () => {
        number.counter++; // 点击按钮时计数器加一
      });

      // 初始化显示
      updateDisplay();
    </script>
  </body>
</html>

三、使用proxy实现一个基础的ref()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基础 ref（）</title>
  </head>
  <body>
    <button id="updateButton">点击+1</button>
    <div id="message"></div>
    <script>
      const createRef = (initialValue) => {
        return new Proxy(
          { value: initialValue },
          {
            get(target, key) {
              return target[key];
            },
            set(target, key, value) {
              target[key] = value;
              if (key === "value") {
                updateDisplay(); // 当.value被设置时，更新DOM
              }
              return true;
            },
          }
        );
      };

      // 初始化ref
      const numberRef = createRef(0);

      // 更新DOM的函数
      const updateDisplay = () => {
        document.getElementById("message").innerText = numberRef.value;
      };

      // 绑定按钮点击事件
      document.getElementById("updateButton").addEventListener("click", () => {
        numberRef.value++; // 点击按钮时计数器加一
      });

      // 初始显示
      updateDisplay();
    </script>
  </body>
</html>