Vue响应式原理：Object.defineProperty深度解析

1. 理解Object.defineProperty的核心机制

在Vue 2.x的响应式系统中，Object.defineProperty扮演着关键角色。这个方法允许我们精确地控制对象属性的行为，而不仅仅是简单的赋值操作。通过它，我们能够拦截对对象属性的访问和修改，这正是Vue实现数据绑定的基础。

1.1 方法的基本语法解析

Object.defineProperty接收三个参数：

javascript复制Object.defineProperty(obj, prop, descriptor)

• obj：要定义属性的目标对象
• prop：要定义或修改的属性名称
• descriptor：属性描述符对象，包含配置项

属性描述符分为两种类型：

1. 数据描述符（value, writable）
2. 存取描述符（get, set）

这两种描述符不能混用，否则会抛出TypeError。在实际开发中，Vue主要使用存取描述符来实现响应式。

1.2 Vue中的典型应用场景

在Vue的初始化阶段，会遍历data选项中的所有属性，使用Object.defineProperty将它们转换为getter/setter：

javascript复制function defineReactive(obj, key) {
  let value = obj[key]
  
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      console.log(`获取${key}: ${value}`)
      return value
    },
    set(newVal) {
      if (newVal === value) return
      console.log(`设置${key}: ${newVal}`)
      value = newVal
      // 这里会触发依赖更新
    }
  })
}

2. 深入响应式原理实现

2.1 依赖收集与派发更新

Vue的响应式系统核心是观察者模式，包含三个关键部分：

1. Observer：递归地将普通对象转换为响应式对象
2. Dep：每个属性都有一个Dep实例，用于收集依赖
3. Watcher：观察者，在属性变化时触发回调

完整实现示例：

javascript复制class Dep {
  constructor() {
    this.subs = new Set()
  }
  
  depend() {
    if (Dep.target) {
      this.subs.add(Dep.target)
    }
  }