Object.defineProperty实现相应式

Vue 中 Object.defineProperty 实现响应式的机制

在 Vue.js 中，响应式系统是其核心特性之一，使得数据的变化可以自动反映在视图上。Vue 通过 Object.defineProperty 方法来实现对象属性的监听和更新。以下是对这一机制的详细探讨：

响应式原理

Vue 的响应式系统主要通过以下几个步骤实现：

• 数据劫持：使用 Object.defineProperty 对对象的每一个属性进行拦截，定义 getter 和 setter 方法。这些方法用于监听属性值的变化。

• 依赖收集：在属性被访问时，将依赖(通常是 watcher)添加到当前属性的订阅者列表中。这样，当属性发生变化时，Vue 能够通知正确的订阅者进行更新。

• 派发更新：当属性值发生改变时，setter 会被触发。此时，Vue 会通知相关依赖进行重新计算或渲染。

实现细节

数据劫持

Vue 使用递归的方法遍历对象的每一个嵌套层级，为每一个可枚举属性调用 Object.defineProperty：

function defineReactive(obj, key, val) {
  if (typeof val === 'object' && val !== null) {
    observe(val); // 递归处理嵌套对象
  }
 
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // 收集依赖
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      val = newVal;
      // 派发更新
    }
  });
}

缺点与局限性

虽然使用 Object.defineProperty 为 Vue 带来了便捷的数据绑定能力，但它也有一些不足之处：

• 无法监测数组变化：JavaScript 的数组操作不会触发 setter，因此 Vue 不得不通过重写数组方法来实现对数组变动的监听。

• 性能问题：对于深层次嵌套的数据结构，大量使用 Object.defineProperty 会导致性能问题，因为每个属性都需要被拦截。

• 动态添加属性：由于 Object.defineProperty 无法检测到对象新增或删除的属性，需要使用 Vue 提供的方法（如 $set）来确保新增数据也是响应式的。