Vue2数据绑定

Object.defineProperty 详解

Object.defineProperty() 是 JavaScript 中的一个重要方法，它允许你精确地添加或修改对象的属性。这个方法在 Vue 2.x 的响应式系统中扮演了核心角色。

基本语法

Object.defineProperty(obj, prop, descriptor)

• obj：要在其上定义属性的对象
• prop：要定义或修改的属性的名称
• descriptor：将被定义或修改的属性描述符

属性描述符

描述符有两种主要形式：数据描述符 和存取描述符。

数据描述符

Object.defineProperty(obj, 'propertyName', {
  value: 'some value',    // 属性值
  writable: true,         // 是否可写
  enumerable: true,      // 是否可枚举（for...in 或 Object.keys()）
  configurable: true      // 是否可删除或修改特性
})

存取描述符（getter/setter）

let internalValue = 'initial'

Object.defineProperty(obj, 'propertyName', {
  get() {
    console.log('Getting value')
    return internalValue
  },
  set(newValue) {
    console.log('Setting new value:', newValue)
    internalValue = newValue
  },
  enumerable: true,
  configurable: true
})

关键特性

1. 默认值差异：

   • 使用 Object.defineProperty() 时，描述符的默认值与直接赋值不同：

     // 直接赋值
     obj.a = 1 
     // 等同于：
     Object.defineProperty(obj, 'a', {
       value: 1,
       writable: true,
       enumerable: true,
       configurable: true
     })
     
     // 使用 defineProperty 不加配置
     Object.defineProperty(obj, 'b', { value: 2 })
     // b 的属性描述符为：
     // value: 2, writable: false, enumerable: false, configurable: false

2. 不可重复配置：

   • 不能同时指定 value/writable 和 get/set
   • 不能混合使用数据描述符和存取描述符

Vue 2.x 中的响应式原理

Vue 2.x 使用 Object.defineProperty 实现数据响应式：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`获取 ${key}: ${val}`)
      return val
    },
    set(newVal) {
      console.log(`设置 ${key}: ${newVal}`)
      if (newVal !== val) {
        val = newVal
        // 触发更新...
      }
    }
  })
}

注意事项

1. 数组限制：

   • Object.defineProperty 不能检测数组长度的变化
   • Vue 2.x 通过重写数组方法（push、pop 等）解决这个问题

2. 新属性问题：

   • 必须为每个属性单独调用 Object.defineProperty
   • Vue 2.x 中需要使用 Vue.set 或 this.$set 添加新响应式属性

3. 性能考虑：

   • 大量使用会影响性能
   • Vue 3 改用 Proxy 实现响应式系统，部分原因是为了解决这个问题

实际应用示例

1. 创建只读属性：

   const obj = {}
   Object.defineProperty(obj, 'readOnlyProp', {
     value: 'cannot change',
     writable: false
   })

2. 实现简单的数据绑定：

   const data = { message: 'Hello' }
   const input = document.querySelector('input')
   
   Object.defineProperty(data, 'message', {
     get() { return input.value },
     set(value) { input.value = value }
   })

Object.defineProperty 提供了对对象属性更精细的控制能力，是 JavaScript 元编程的重要工具之一。

Vue 2.x 中 Object.defineProperty 的数组和新增属性处理

数组变化的检测问题

问题本质

Object.defineProperty 无法直接检测以下数组变化：

1. 通过索引直接设置项：arr[index] = newValue
2. 修改数组长度：arr.length = newLength

Vue 2.x 的解决方案

Vue 通过重写数组的变异方法(mutation methods)来实现响应式：

// 保存数组原型
const arrayProto = Array.prototype
// 创建新对象继承数组原型
const arrayMethods = Object.create(arrayProto)

// 需要重写的数组方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function(method) {
  // 缓存原始方法
  const original = arrayProto[method]
  
  // 定义新方法
  Object.defineProperty(arrayMethods, method, {
    value: function mutator(...args) {
      // 先执行原始方法
      const result = original.apply(this, args)
      
      // 获取Observer实例
      const ob = this.__ob__
      
      // 对于push/unshift/splice可能新增元素的情况
      let inserted
      switch (method) {
        case 'push':
        case 'unshift':
          inserted = args
          break
        case 'splice':
          inserted = args.slice(2)
          break
      }
      
      // 如果有新增元素，将它们转为响应式
      if (inserted) ob.observeArray(inserted)
      
      // 通知依赖更新
      ob.dep.notify()
      
      return result
    },
    enumerable: false,
    writable: true,
    configurable: true
  })
})

实际效果

这样处理后，以下操作可以触发视图更新：

// 可以触发更新
this.items.push(newItem)
this.items.splice(0, 1, replacement)

// 不能触发更新（需要特殊处理）
this.items[0] = newValue  // 需要使用 Vue.set 或 splice
this.items.length = 0     // 需要使用 splice

新增属性的处理问题

问题本质

Object.defineProperty 必须在初始化时就定义好所有响应式属性，后添加的属性不会自动变为响应式。

Vue.set / this.$set 的实现

Vue 提供了全局方法 Vue.set 和实例方法 this.$set 来解决这个问题：

// 简化版实现
function set(target, key, val) {
  // 处理数组情况
  if (Array.isArray(target)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val) // 使用splice确保响应式
    return val
  }
  
  // 对象已有该属性，直接赋值
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  
  // 获取Observer实例
  const ob = target.__ob__
  
  // 非响应式对象，直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  
  // 将新属性转为响应式
  defineReactive(ob.value, key, val)
  
  // 通知依赖更新
  ob.dep.notify()
  
  return val
}

使用示例

// 对于对象
this.$set(this.someObject, 'newProperty', 'value')

// 对于数组
this.$set(this.someArray, index, newValue)

// 全局使用
Vue.set(vm.someObject, 'newProperty', 'value')

为什么需要这样处理

1. 对象新增属性：

   // 不会触发视图更新
   this.someObject.newProp = 'value'
   
   // 会触发视图更新
   this.$set(this.someObject, 'newProp', 'value')

2. 数组索引设置：

   // 不会触发视图更新
   this.someArray[index] = newValue
   
   // 会触发视图更新
   this.$set(this.someArray, index, newValue)
   // 或
   this.someArray.splice(index, 1, newValue)

总结对比

情况	问题	Vue 2.x 解决方案
数组索引修改	arr[index] = value 不触发更新	使用 Vue.set 或 splice
数组长度修改	arr.length = newLength 不触发更新	使用 splice
对象新增属性	obj.newProp = value 不触发更新	使用 Vue.set
嵌套对象属性	深层次属性可能不是响应式	初始化时应完整定义嵌套结构

这些限制是 Vue 3 改用 Proxy 实现响应式系统的主要原因之一，Proxy 可以更全面地拦截对象操作。