首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue2 Vue3的双向数据绑定原理

Vue2和Vue3的双向数据绑定原理分析

2025-02-06 09:47:43 作者：清风与我

Vue2.x通过Object.defineProperty()实现响应式系统,但存在一些限制,如不能检测新增和删除的属性、深层嵌套对象性能开销大等,Vue3.0引入Proxy,可以更高效地拦截对象操作,解决这些问题

vue2.x 是如何实现响应式系统的

当你把一个普通的 js 对象传入 vue 实例作为 data 选项，vue 将遍历此对象的所有prototype（属性），并使用 object.defineProperty(),将这些 prototype(属性)，全部转换为 getter / setter，在 getter 中收集数据依赖，在 setter 中监听数据变化，一旦数据发生改变，在通知订阅者。

每个组件实例，都对应一个 watcher 实例，它会在组件渲染的过程把 “接触” 过的数据 prototype(属性)记录为依赖，之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染；

defineProperty 的痛点

它无法发现对象新增和被删除的属性，当你给一个对象添加一个新的属性，这个新增的属性没有添加到 vue 的数据更新侦查机制里；

Vue.set() 可以让 vue 知道你新增了一个属性，其实 Vue.set 可以让 Vue 知道新增了一个属性。其实 set() 内部也是通过调用 defineProperty() 来实现；

当你利用索引直接设置一个数组（new Array(4)）或者修改数组的长度时，Vue 不能检测到数组的变动；
当对象嵌套的层数特别深（多层嵌套）的时候，递归遍历带来的性能开销就会比较大；

Object.defineProperty 代码的使用

mounted() {
    // 先定义好一套规则
    class Observer {
      constructor(data) {
        for (let key of Object.keys(data)) {
          if (typeof data[key] === "object") {
            data[key] = new Observer(data[key]);
          }
          Object.defineProperty(this, key, {
            enumerable: true,
            configurable: true,
            get() {
              console.log("You visited" + key);
              return data[key];
            },
            set(NewValue) {
              console.log("You set" + key);
              console.log("New Value" + NewValue);
              if (NewValue === data[key]) {
                return;
              }
              data[key] = NewValue;
            },
          });
        }
      }
    }
    let obj = {
      name: "app",
      age: 18,
      a: {
        b: 1,
        c: {
          d: 1,
        },
      },
    };
    let app = new Observer(obj);
    console.log(app);
    app.age = 20;
    app.newProperty = "new attrs";
    console.log(app);
  },

结果：

Proxy 方法的理解

Proxy 在 vue3.0 中上位

可以解决 defineProperty 的痛点，因为本质的原因在于 Proxy 是内置了拦截器对象。所有的外部访问都得先经过这一层拦截，不管是先前定义好的，还是新增的属性，又或者是深层的嵌套属性，访问时都会被拦截；

Reflect.set()方法用于设置对象属性的值，1：目标对象:2：改变参数的名称:3：改变参数的值:4：值是this如果遇到设置器，将提供给目标调用。

此方法返回一个布尔值，该值指示该属性是否已成功设置。

Proxy 代码的使用

mounted() {
    const obj = {
      name: "app",
      age: 19,
      a: {
        b: 1,
        c: 2,
      },
    };
    const p = new Proxy(obj, {
      get(target, propKey, receiver) {
        console.log("Your visited：" + propKey);
        // Reflect.set()方法用于设置对象属性的值:1：目标对象:2：改变参数的名称:3：改变参数的值
        // 此方法返回一个布尔值，该值指示该属性是否已成功设置。
        return Reflect.set(target, propKey, receiver);
      },
      set(target, propKey, value, receiver) {
        console.log("You set：" + propKey);
        console.log("New value：" + value);
        // Reflect.set()方法用于设置对象属性的值，1：目标对象:2：改变参数的名称:3：改变参数的值:4：值是this如果遇到设置器，将提供给目标调用。
        // 此方法返回一个布尔值，该值指示该属性是否已成功设置。
        return Reflect.set(target, propKey, value, receiver);
      },
    });
    p.age = "20";
    console.log(p);
    p.newProperty = "New attribute";
    console.log(p);
  },