1. Vue 响应式系统的设计哲学

前端框架的核心诉求之一就是实现数据与UI的自动同步。Vue的响应式系统本质上是一种观察者模式的实现，它通过建立数据属性与依赖之间的映射关系，在数据变化时自动触发相关视图更新。

在Vue 2和Vue 3中，这种设计理念一脉相承，但具体实现机制有显著差异。理解这些差异不仅能帮助我们更好地使用框架，还能在遇到性能问题时快速定位原因。

2. Vue 2的响应式实现：Object.defineProperty

2.1 核心机制解析

Vue 2使用Object.defineProperty API来实现数据劫持。这个ES5特性允许开发者定义对象属性的getter和setter：

javascript复制let value = 'initial'
const obj = {}
Object.defineProperty(obj, 'property', {
  get() {
    console.log('属性被读取')
    return value
  },
  set(newValue) {
    console.log('属性被修改')
    value = newValue
  }
})

Vue利用这个特性，在组件初始化时递归地遍历data对象的所有属性，将它们转换为getter/setter形式。当组件渲染时，任何被访问的属性都会通过getter收集当前渲染函数作为依赖；当属性值变化时，setter会通知所有依赖进行更新。

2.2 实现细节与限制

在实际实现中，Vue 2的响应式系统有几个关键特点：

1. 递归初始化：对于嵌套对象，Vue会递归地将其所有属性转换为响应式
2. 数组方法重写：由于Object.defineProperty对数组索引操作无效，Vue重写了push/pop/shift/unshift/splice/sort/reverse这7个方法
3. 新增属性问题：动态添加的属性需要使用Vue.set或this.$set才能变为响应式

javascript复制// Vue 2中动态添加响应式属性的正确方式
this.$set(this.someObject, 'newProperty', 'value')