202 vue2的响应式原理通俗易懂！-Toy模板网

这篇具有很好参考价值的文章主要介绍了202 vue2的响应式原理通俗易懂！。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、vue2的响应式原理？

1.1、前言

Object.defineProperty+依赖追踪。

在Vue实例化过程中，会递归地将每个数据对象的属性转换为getter/setter，并维护一个依赖收集器（Dep）。每个属性都有一个关联的watcher，当数据发生变化时，watcher会被通知并更新视图。

Vue 2.x 实现响应式数据：

<div id="app">
  <p>{{ message }}</p>
  <button @click="updateMessage">Update Message</button>
  </div>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    updateMessage() {
      this.message = 'Hello, World!';
    }
  }
});

vue实例化时，会将message属性转换为 getter/setter，并添加到依赖收集器中。当属性值变化时，依赖收集器通知相关的watcher更新视图。

1.2、如何转为getter/setter

在 Vue2.X 中，可以使用 Object.defineProperty() 将属性转换为 getter/setter。这个方法接收三个参数：对象、属性名称和一个描述符对象。

示例代码：

/*
 * @Description:
 * @Author: muge
 * @Date: 2022-10-03 12:01:03
 * @LastEditors: muge
 * @LastEditTime: 2023-05-20 14:33:35
 */
var obj = {}; // 创建一个空对象
// 定义一个属性 name，并将其转换为 getter/setter
Object.defineProperty(obj, "name", {
  get: function () {
    console.log("获取 name 属性");
    return this._name;
  },
  set: function (value) {
    console.log("设置 name 属性为", value);
    this._name = value;
  },
});
// 使用属性
obj.name = "muge"; // 调用 setter
console.log(obj.name); // 调用 getter，打印 'muge'

我们将 obj 对象的 name 属性转换为 getter/setter。当获取 name 属性时，get() 方法会被调用。当设置 name 属性时，set() 方法会被调用。