Vue2响应式原理与$set方法解析

1. Vue2响应式原理深度解析

Vue2的响应式系统是其核心特性之一，它通过数据劫持实现了数据与视图的自动同步。理解这个机制对于开发中避免"响应式丢失"问题至关重要。

1.1 Object.defineProperty的工作原理

Vue2使用Object.defineProperty()方法来实现数据劫持。这个方法允许我们精确地添加或修改对象的属性。在Vue中，它主要做两件事：

1. Getter拦截：当属性被访问时收集依赖
2. Setter拦截：当属性被修改时通知更新

javascript复制let obj = { name: '张三' }
Object.defineProperty(obj, 'name', {
  get() {
    console.log('正在读取name属性')
    return this._name
  },
  set(newVal) {
    console.log('正在修改name属性')
    this._name = newVal
    // 这里会触发视图更新
  }
})

注意：实际Vue实现中会使用闭包存储值，这里简化了示例

1.2 响应式系统的局限性

虽然Object.defineProperty很强大，但它有几个关键限制：

1. 无法检测对象属性的添加或删除：初始化后新增的属性不会被劫持
2. 数组索引修改无法被检测：直接通过索引修改数组元素不会触发更新
3. 数组长度变化无法被检测：修改length属性不会触发更新

这些限制正是Vue2中响应式丢失问题的根源。

2. 响应式丢失的典型场景分析

2.1 数组索引修改问题

javascript复制let arr = [1, 2, 3]
arr[0] = 10  // 不会触发视图更新

这种情况发生的原因是Vue无法通过Object.defineProperty拦截数组索引的访问和修改。数组在JavaScript中是特殊对象，其索引实际上是对象的属性名，但Vue出于性能考虑没有对数组索引进行劫持。

2.2 对象属性动态添加问题

javascript复制let obj = { name: '张三' }
obj