vue2响应式

最新推荐文章于 2024-06-16 18:09:06 发布

呆呆的楞楞

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量43

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44970109/article/details/134313832

版权

现在我们从原生开始哈~

1.创建一个对象user,响应到html里面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue双向绑定</title>
  </head>
  <body>
    <div class="user_box">
      <div>
        <span> 姓名: </span>
        <span class="name"> </span>
      </div>
      <div>
        <span> 年龄: </span>
        <span class="age"> </span>
      </div>
    </div>
  </body>
</html>

2.创建user对象，并将其显示到页面上

let user = {
  name: "xiaolin",
  age: 30,
};

function showUserName() {
  let el = document.querySelector(".name");
  el.textContent = user.name;
}

function showUserAge() {
  let el = document.querySelector(".age");
  el.textContent = user.age;
}

showUserAge();
showUserName();

3.从上面引发的思考，优大神是怎么做的（vue2的数据响应 Object.defineProperties）

let intervalValue = user.name;
Object.defineProperty(user, "name", {
  get() {
    return intervalValue;
  },
  set(value) {
    intervalValue = value;
    showUserName();
  },
});

4.这个时候回发现有 getter和setter，那么我是不是可以分装出来一个函数


function observe(obj) {
  for (const key in obj) {
    let intervalValue = obj[key];
    Object.defineProperty(obj, key, {
      get() {
        return intervalValue;
      },
      set(value) {
        intervalValue = value;
      },
    });
  }
}

5.我在这里能读取出一个属性那么我改怎么调用函数呢？？？

function observe(obj) {
  for (const key in obj) {
    if (Object.hasOwnProperty.call(obj, key)) {
      let value = obj[key];
      let funcs = [];
      Object.defineProperty(obj, key, {
        get() {
          if (!funcs.includes(window._func) && window._func) {
            funcs.push(window._func);
          }
          console.log(funcs);
          return value;
        },
        set(newValue) {
          value = newValue;

          for (let i = 0; i < funcs.length; i++) {
            let func = funcs[i];
            console.log(func);
            func();
          }
        },
      });
    }
  }
}
function autoFunc(fn) {
  window._func = fn;
  fn();
  window._func = null;
}

这一块的代码注意get里面的函数，我们是无法读取到函数的，所以采用了全局变量来做

let user = {
  name: "xiaolin",
  age: 30,
};
observe(user);

function showUserName() {
  let el = document.querySelector(".name");
  el.textContent = user.name;
}

function showUserAge() {
  let el = document.querySelector(".age");
  el.textContent = user.age;
}

autoFunc(showUserName);
autoFunc(showUserAge);

调取autoFunc()