看懂 Vue.js 中响应式原理-数据劫持与 defineReactive()

2023-11-26 12:43:40

前言

Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。它采用响应式系统来跟踪数据的变化，并自动更新受影响的组件。在本文中，我们将详细解析 Vue.js 中响应式系统是如何实现的，包括数据劫持和 defineReactive() 函数的实现原理，以及 ES6 Proxy 和 ES5 Object.defineProperty 的使用。通过本文，您将对 Vue.js 的响应式系统有一个深入的了解。

数据劫持

数据劫持是一种通过代理来拦截对象属性访问和修改的技术。在 Vue.js 中，数据劫持用于将普通 JavaScript 对象转换为响应式对象。响应式对象的特点是，当它的属性发生变化时，Vue.js 能够自动检测到变化并更新受影响的组件。

defineReactive() 函数

defineReactive() 函数是 Vue.js 中数据劫持的核心函数。它将普通 JavaScript 对象的属性转换为响应式属性。defineReactive() 函数的实现原理如下：

首先，它创建一个 getter 函数，该函数会在属性被访问时触发。
其次，它创建一个 setter 函数，该函数会在属性被修改时触发。
最后，它使用 ES6 Proxy 或 ES5 Object.defineProperty 将 getter 和 setter 函数分别赋给属性的 getter 和 setter 属性。

这样，当属性被访问或修改时，getter 和 setter 函数就会被触发，从而实现对属性变化的监听。

ES6 Proxy

ES6 Proxy 是一个内置对象，它可以拦截对象的属性访问、修改、添加和删除操作。Vue.js 中的数据劫持就是使用 ES6 Proxy 来实现的。

使用 ES6 Proxy 实现数据劫持

const obj = {
  name: 'John',
  age: 20
};

const proxy = new Proxy(obj, {
  get(target, property) {
    console.log('属性被访问：', property);
    return target[property];
  },
  set(target, property, value) {
    console.log('属性被修改：', property, value);
    target[property] = value;
  }
});

proxy.name = 'Mary'; // 属性被修改：name Mary
console.log(proxy.age); // 属性被访问：age

在上面的代码中，我们使用 ES6 Proxy 创建了一个代理对象 proxy。当我们访问或修改 proxy 对象的属性时，相应的 getter 和 setter 函数就会被触发，从而实现对属性变化的监听。

ES5 Object.defineProperty

ES5 Object.defineProperty 也是一个内置对象，它可以拦截对象的属性访问和修改操作。在 Vue.js 中，当 ES6 Proxy 不支持时，数据劫持会使用 ES5 Object.defineProperty 来实现。

使用 ES5 Object.defineProperty 实现数据劫持

const obj = {
  name: 'John',
  age: 20
};

Object.defineProperty(obj, 'name', {
  get() {
    console.log('属性被访问：name');
    return this.name;
  },
  set(value) {
    console.log('属性被修改：name', value);
    this.name = value;
  }
});

Object.defineProperty(obj, 'age', {
  get() {
    console.log('属性被访问：age');
    return this.age;
  },
  set(value) {
    console.log('属性被修改：age', value);
    this.age = value;
  }
});

obj.name = 'Mary'; // 属性被修改：name Mary
console.log(obj.age); // 属性被访问：age