Vue 响应式原理剖析：从 Vue2 到 Vue3

前言

Vue.js 作为当今最流行的前端框架之一，其核心的设计思想之一就是数据响应式。通过数据响应式，Vue 可以自动追踪和更新与数据绑定的视图，从而实现高效、直观的 UI 开发。在 Vue2.x 中，数据响应式是通过 Object.defineProperty() 来实现的，而在 Vue3.x 中，则改用 Proxy 对象来实现。

Vue2.x 的数据劫持

在 Vue2.x 中，数据响应式是通过数据劫持来实现的。数据劫持是指通过某种手段，在不修改原有对象的情况下，对对象的属性进行拦截和修改。在 Vue2.x 中，数据劫持是通过 Object.defineProperty() 来实现的。

Object.defineProperty() 方法可以拦截对象的属性访问和修改，并在访问或修改属性时触发相应的回调函数。在 Vue2.x 中，Vue 利用 Object.defineProperty() 方法对对象的每个属性进行劫持，并在属性发生变化时触发回调函数，从而实现数据响应式。

// 假设我们有一个对象 data
const data = {
  name: 'John Doe',
  age: 25
};

// 使用 Object.defineProperty() 劫持对象的属性
Object.defineProperty(data, 'name', {
  get() {
    console.log('访问了 name 属性');
    return this.name;
  },
  set(newValue) {
    console.log('修改了 name 属性');
    this.name = newValue;
  }
});

// 当访问 data.name 属性时，会触发 getter 回调函数
console.log(data.name); // 输出：访问了 name 属性 John Doe

// 当修改 data.name 属性时，会触发 setter 回调函数
data.name = 'Jane Doe'; // 输出：修改了 name 属性 Jane Doe

Vue3.x 的 Proxy 实现

在 Vue3.x 中，数据响应式不再使用 Object.defineProperty() 来实现，而是改用 Proxy 对象来实现。Proxy 对象是 JavaScript 中的一个新特性，它允许我们拦截和修改对象的属性访问和修改。与 Object.defineProperty() 相比，Proxy 对象更加灵活和强大，它可以拦截任意属性的访问和修改，包括那些不可枚举的属性。

// 假设我们有一个对象 data
const data = {
  name: 'John Doe',
  age: 25
};

// 使用 Proxy 对象劫持对象
const proxy = new Proxy(data, {
  get(target, property) {
    console.log(`访问了 ${property} 属性`);
    return target[property];
  },
  set(target, property, newValue) {
    console.log(`修改了 ${property} 属性`);
    target[property] = newValue;
    return true;
  }
});

// 当访问 proxy.name 属性时，会触发 getter 回调函数
console.log(proxy.name); // 输出：访问了 name 属性 John Doe

// 当修改 proxy.name 属性时，会触发 setter 回调函数
proxy.name = 'Jane Doe'; // 输出：修改了 name 属性 Jane Doe

总结

Vue 框架的数据响应式原理经历了从 Vue2.x 的数据劫持到 Vue3.x 的 Proxy 实现的演变。Proxy 对象的引入使得 Vue3.x 的数据响应式更加灵活和强大。通过 Proxy 对象，Vue 可以更加方便地拦截和修改对象的属性访问和修改，包括那些不可枚举的属性。这使得 Vue3.x 的数据响应式更加全面和完善。