Vue2和Vue3响应式的基本实现

简介

在 Vue 框架中，数据的响应式是其核心特性之一。当页面数据发生变化时，我们希望界面能自动更新，而不是手动操作 DOM。这就需要对数据进行监听，并在数据变更时触发 UI 重新渲染。
Vue2 和 Vue3 在实现响应式的方式上有所不同，Vue2 主要依赖 Object.defineProperty，而 Vue3 则引入了 Proxy，大大优化了响应式系统的性能和灵活性。它们都是通过函数来封装响应式对象，方便读取或更新数据时能够进行其他的操作。

Vue2 响应式

Vue2 使用 Object.defineProperty 来拦截对象属性的访问和修改，从而实现响应式。

const obj = {
  a: 1,
  b: 2,
  c: {
    x: 66,
    y: 2,
  }
}

function isObject(v) {
  return typeof v === 'object' && v !== null;
}

function observe(obj) {
  for (const k in obj) {
    let v = obj[k];
    if (isObject(v)) observe(v); // 递归遍历
    Object.defineProperty(obj, k, {
      get() {
        console.log(`读取${k}, 值${v}`);
        return v;
      },
      set(newVal) {
        v = newVal;
        console.log(`更新${k}, 值${v}`);
      }
    });
  }
}

observe(obj);

obj.a;
obj.a = 101;
obj.c.x;
obj.c.x = 166;

Vue2 响应式的局限性

• 需要遍历对象的每个属性，性能较低。
• 不能检测到新增或删除的属性。
• 需要手动调用 Vue.set() 以确保新属性的响应式。

Vue3 响应式

Vue3 使用 Proxy 实现响应式，可以直接监听整个对象，而不是逐个属性。

const obj = {
    a: 1,
    b: 2,
    c: {
        x: 1,
        y: 2,
    }
};

function isObject(v) {
    return typeof v === 'object' && v !== null;
}

function reactive(target) {
    return new Proxy(target, {
        get(target, k) {
            console.log(`读取: ${k}, 值: ${target[k]}`);
            // 读取时才递归生成代理
            if (isObject(target[k])) return reactive(target[k]);
            return target[k];
        },
        set(target, k, newVal) {
            if (newVal === target[k]) return;
            console.log(`更新: ${k}, 值${newVal}`);
            target[k] = newVal;
            return true;
        }
    });
}

const proxy = reactive(obj);

proxy.a;
proxy.a = 100;
proxy.c.x;

Vue3 响应式的优点

• 直接监听整个对象，无需遍历所有属性。
• 可以检测到属性的新增和删除。
• 具有更好的性能和更简洁的代码结构。

Vue2 和 Vue3 响应式对比

Vue3 通过 Proxy 解决了 Vue2 的许多缺陷，使得响应式系统更加高效、灵活和简洁。因此，Vue3 的响应式能力远超 Vue2。