Vue 3响应式系统与组合式API深度解析

1. Vue 2与Vue 3的响应式系统差异

1.1 Vue 2的响应式实现原理

Vue 2采用Object.defineProperty实现响应式，这种方式存在几个明显的局限性：

javascript复制// Vue 2响应式示例
data() {
  return {
    user: { name: '张三' },
    list: ['a', 'b']
  }
},
methods: {
  addProperty() {
    // 新增属性需要使用Vue.set
    this.$set(this.user, 'age', 25)
    
    // 修改数组索引也需要特殊处理
    this.$set(this.list, 2, 'c')
  }
}

技术细节解析：

1. 初始化时递归遍历data对象的所有属性，使用Object.defineProperty添加getter/setter
2. 每个组件实例对应一个Watcher实例，在getter中收集依赖，在setter中通知更新
3. 数组方法通过重写(push/pop/shift等)实现响应式

实际开发中的痛点：

• 无法检测对象属性的添加或删除
• 数组索引修改和长度变化无法追踪
• 初始化阶段递归遍历整个对象，性能消耗较大

1.2 Vue 3的Proxy响应式系统

Vue 3使用ES6的Proxy重构了响应式系统：

javascript复制<script setup>
import { reactive, ref } from 'vue'

const state = reactive({
  user: { name: '李四' },
  list: ['x', 'y']
})

function modifyData() {
  // 直接添加新属性
  state.user.age = 30
  
  // 直接修改数组
  state.list[2] = 'z'
  state.list.length = 5
}
</script>

底层实现优势：

1. Proxy可以拦截整个对象，不需要遍历属性
2. 支持13种拦截操作，包括属性增删、数组索引修改等
3. 惰性响应式：只有在访问时才会递归转换嵌套对象

性能对比测试数据：

• 初始化速度：大型对象(1万属性)快2-3倍
• 内存占用：减少30%-50%
• 更新性能：深层对象更新快5倍以上

2. 组件开发模式演变

2.1 选项式API的特点与局限

javascript复制// Vue 2选项式API示例
export default {
  data() {
    return {
      count: 0,
      searchQuery: ''
    }
  },
  computed: {
    filteredList() {