Vue2响应式原理

最新推荐文章于 2024-08-31 13:30:09 发布

张太难

最新推荐文章于 2024-08-31 13:30:09 发布

阅读量99

点赞数

文章标签：前端 javascript html vue.js vue

本文链接：https://blog.csdn.net/m0_52726759/article/details/129040479

版权

要搞清楚这个问题，首先要明确什么是响应式。

响应式可以理解为：当数据发生变化时，执行一系列的操作。比如，修改某一个数据时，修改执行一系列的操作重新渲染页面上用到这个数据的地方。

 <body>
    <div id="app"></div>
    <script>
      const app = document.querySelector("#app");
      let name = "ikun";
      app.textContent = "姓名:" + name;
    </script>
  </body>

上面这部分代码页面显示如下：

这时如果我们修改变量name的值，修改这个值的操作显然不会引起其他任何操作，我们说这个name不是响应式的，页面也不会有任何变化。

那么我们如何让这个name变成响应式呢？

JS给我们提供了对象的访问器属性。来看一下它的基本使用：

let ikun = "ikun";
let o = {
  get name() {
    console.log("获取name");
    return ikun;
  },
  set name(value) {
    console.log("设置name");
    ikun = value;
  },
};
console.log(o.name);
o.name = "小黑子";
console.log(o.name);

上面的代码输出结果如下:

获取name

ikun

设置name

获取name

小黑子

分析：

访问 o.name 时会执行get name函数，并得到其返回值。

设置 o.name="小黑子" 时会执行set name函数，并将赋值表达式等号右侧的值作为其参数。

虽然是在调用方法，但我们使用时并没有加 "（）"。

可以通过Object.defineProperty这个内置的API将一个对象的某个属性配置为访问器属性。

上面的代码等价于下面这段代码：

let ikun = "ikun";
let o = {};

Object.defineProperty(o, "name", {
  get: function name() {
    console.log("获取name");
    return ikun;
  },
  set: function name(value) {
    console.log("设置name");
    ikun = value;
  },
});
console.log(o.name);
o.name = "小黑子";
console.log(o.name);

访问器属性的这种机制赋予了我们在读取或设置对象属性时执行其他操作的机会。而Vue正是利用了这个机制将数据通过Object.defineProperty变成响应式数据，同时，在每次获取数据的时候记录哪些地方用到该数据（依赖收集）；在修改数据的时候更新页面中使用到该数据的部分（派发更新）。至于Vue是怎么进行依赖收集的则是另一个值得探讨的问题。