Vue原理学习 - 实现数据代理和数据劫持

在 Vue.js 中，数据代理（Data Proxy）和数据劫持（Data Interception）是两个核心概念，它们在实现 Vue 的双向绑定和响应式数据流方面发挥了重要作用。

数据代理（Data Proxy）： 数据代理是一种机制，使得我们可以通过一个对象来访问另一个对象的属性。在 Vue 中，数据代理用于将 Vue 实例的属性访问代理到其 data 对象中的属性上。这样一来，我们可以通过直接访问 Vue 实例来访问和修改其数据属性。

示例：

const vm = new Vue({
  data: {
    message: "Hello, World!"
  }
});

console.log(vm.message); // 通过数据代理访问属性

在上述示例中，vm.messgae 实际上是访问了 vm._data.message，其中 _data 是一个保存着实际数据的对象，通过数据代理，我们可以像直接访问属性一样访问 Vue 实例的属性。

数据劫持（Data Interception）： 数据劫持是指在访问或修改对象的属性时，对这些操作进行拦截和监视，以便在属性发生变化时能够触发相关的操作。在 Vue 中，数据劫持用于监听数据的变化，以实现双向绑定和响应式更新。

Vue 通过在数据对象的属性上使用 Object.defineProperty 来实现数据劫持。每当访问属性或修改属性时，Vue 会触发相应的 get 和 set 拦截器，从而实现对数据变化的监听。

通过数据劫持，Vue 能够在属性发生变化时自动触发视图的更新，从而实现了响应式的特性

Object.defineProperty

Object.defineProperty 是 JavaScript 中的一个方法，用于在对象上定义或修改属性的特性。通过 Object.defineProperty，您可以精确地控制属性的行为，包括设置属性的值、可枚举性、可配置性、可写性以及获取和设置属性的方法（即 getter 和 setter）。

该方法接受三个参数：

1. 对象（Object）： 要在其上定义或修改属性的对象。
2. 属性名（Property Name）： 要定义或修改的属性的名称。
3. 属性描述符（Property Descriptor）： 一个对象，用于设置属性的特性。

属性描述符对象可以包含以下属性：

• value：属性的值（默认为 undefined）。
• writable：属性是否可写（默认为 false）。
• enumerable：属性是否可枚举（使用for...in或Object.keys()）（默认为 false）。
• configurable：属性是否可配置（默认为 false），是否可以删除目标属性或是否可以再次修改属性的特性（writable, configurable, enumerable）。
• get：获取属性值的函数。当访问该属性时，该方法会被执行。函数的返回值会作为该属性的值返回。
• set：设置属性值的函数。当属性值修改时，该方法会被执行。该方法将接受唯一参数，即该属性新的参数值。

注意：

1. 当使用了getter或setter方法，不允许使用writable和value这两个属性；
2. 不要在getter中再次获取该属性值，也不要在setter中再次设置该属性，否则会栈溢出。

const obj = {};

Object.defineProperty(obj, "prop", {
  value: 123,
  writable: false,
  enumerable: true,
  configurable: true
});

console.log(obj.prop); // 输出: 123
obj.prop = 456; // 报错，因为属性不可写

在上述示例中，Object.defineProperty 将一个名为 prop 的属性定义在 obj 对象上，设置了属性的值、可枚举性以及是否可写。由于 writable 被设置为 false，所以尝试修改 prop 的值会报错。

Object.defineProperty 主要用于对单个属性进行操作，它可以用于实现一些高级的对象操作，例如创建只读属性、定义计算属性、实现拦截器等。在 Vue.js 中，Object.defineProperty 在实现数据劫持（响应式）方面发挥了重要作用。

实现数据代理

使用 Object.defineProperty 来模拟实现 Vue 的数据代理时，需要将 Vue 实例的属性访问代理到其 data 对象中的属性上。

示例：

function Vue(options) {
  this._data = options.data;

  // 实现数据代理
  for (let key in this._data) {
    Object.defineProperty(this, key, {
      get: function() {
        return this._data[key];
      },
      set: function(value) {
        this._data[key] = value;
      }
    });
  }
}

const vm = new Vue({
  data: {
    message: "Hello, Vue!"
  }
});

console.log(vm.message); // 通过数据代理访问属性
vm.message = "Hello, Vue 2.0!"; // 通过数据代理修改属性

console.log(vm._data.message); // 通过原始 data 访问属性（仍然可行）

在上述示例中，Vue 构造函数接受一个 options 对象，其中包含一个 data 属性。在构造函数中，我们将 options.data 赋值给 _data 属性，并使用 Object.defineProperty 循环遍历 _data 中的属性，为每个属性设置 get 和 set 拦截器，从而实现了属性访问的代理。

请注意，这个示例只是一个简化版的模拟，Vue 的实际实现涉及更多的细节和功能。这里的目的是演示使用 Object.defineProperty 实现数据代理的基本原理。

实现数据劫持

使用 Object.defineProperty 来模拟实现 Vue 的数据劫持（响应式）是一个复杂的过程，涉及到对象属性的拦截、依赖追踪、触发更新等。以下是一个简化版的使用 Object.defineProperty 模拟实现数据劫持的示例：

function observe(data) {
  if (!data || typeof data !== "object") {
    return;
  }

  for (let key in data) {
    let value = data[key];

    // 为每个属性创建依赖数组
    let dep = [];

    Object.defineProperty(data, key, {
      get: function() {
        if (dep.target) {
          // 添加依赖
          dep.push(dep.target);
        }
        return value;
      },
      set: function(newValue) {
        if (value !== newValue) {
          value = newValue;

          // 通知依赖更新
          for (let i = 0; i < dep.length; i++) {
            dep[i](newValue);
          }
        }
      }
    });
  }
}

function Vue(options) {
  this._data = options.data;

  // 进行数据劫持（响应式）
  observe(this._data);
}

Vue.prototype.$watch = function(key, callback) {
  // 在数据变化时执行回调
  dep.target = callback;
  this._data[key]; // 触发 getter，建立依赖
  dep.target = null;
};

const vm = new Vue({
  data: {
    message: "Hello, Vue!"
  }
});

vm.$watch("message", function(newVal) {
  console.log("Message updated:", newVal);
});

vm._data.message = "Hello, Vue 2.0!"; // 触发数据更新，触发 watch 回调

在上述示例中，我们定义了一个 observe 函数，它遍历 data 对象的属性，并使用 Object.defineProperty 对属性进行拦截。我们还定义了一个 Vue 构造函数，其中创建了一个数据对象并应用了数据劫持。我们还添加了一个简单的 $watch 方法，用于监听数据变化。

请注意，这只是一个基本的模拟示例，Vue 的实际实现更为复杂，涉及到异步更新、依赖追踪、虚拟 DOM 等。这里的目的是演示使用 Object.defineProperty 实现简单的数据劫持的基本原理。