【DAY50】Vue的响应式原理

最新推荐文章于 2024-09-16 12:04:11 发布

qq_42775808

最新推荐文章于 2024-09-16 12:04:11 发布

阅读量118

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42775808/article/details/130746531

版权

文章介绍了使用Object.defineProperty实现数据监听，通过遍历对象属性创建响应式属性，当属性值改变时更新DOM。同时提到了Proxy如何代理对象，实现get和set操作，同样用于数据变化的监听。这两种方法在数据绑定和响应式系统中起到关键作用。

摘要由CSDN通过智能技术生成

监听：

Object.....是监听的原始对象

<html>
  <head> </head>
  <body>
    <div id="app">
      <p></p>
    </div>
  </body>
  <script>
    let data = {
      name: "这是个测试",
      age: 18,
      height: 180,
    };
    Object.keys(data).forEach((key) => {
      // key 属性名
      // data[key] 属性值
      // data 原对象
      defineReactive(data, key, data[key]);
    });
    // 响应式转化方法
    function defineReactive(data, key, value) {
      Object.defineProperty(data, key, {
        get() {
          console.log("这是当前value", value);
          return value;
        },
        set(newVal) {
          value = newVal;
          document.querySelector("#app p").innerHTML = data.name;
        },
      });
    }
    document.querySelector("#app p").innerHTML = data.name;
  </script>
</html>

Proxy监听代理对象

<!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></body>
  <script>
    const target = {
      name: "Tom",
    };
    const handler = {
      get: function (target, prop, receiver) {
        console.log("get", prop);
        return target[prop];
      },
      set: function (target, prop, value, receiver) {
        console.log("set", prop, value);
        target[prop] = value;
        return true;
      },
    };
    const proxy = new Proxy(target, handler);
  </script>
</html>