嵌套响应对象的处理方式

嵌套响应对象的处理方式

Vue3的响应式系统基于Proxy实现，对于嵌套对象的处理方式与Vue2有显著不同。当遇到嵌套对象时，Vue3会递归地将整个对象树转换为响应式，这种设计带来了更精细的依赖追踪能力。

基本处理机制

Vue3通过reactive()函数创建响应式对象时，会对嵌套对象进行深度代理。例如：

const obj = reactive({
  nested: {
    count: 0
  },
  array: [{ value: 1 }]
})

在这个例子中，不仅obj本身是响应式的，obj.nested和obj.array[0]也会被自动转换为响应式对象。这种处理发生在首次访问属性时，采用懒代理策略：

// 首次访问时才会代理嵌套对象
console.log(isReactive(obj.nested)) // true
console.log(isReactive(obj.array[0])) // true

递归代理的实现原理

在baseHandlers.ts中，Proxy的get拦截器会这样处理嵌套对象：

function createGetter(isReadonly = false) {
  return function get(target: object, key: string | symbol) {
    const res = Reflect.get(target, key)
    // 如果获取的值是对象，则递归调用reactive
    if (typeof res === 'object' && res !== null) {
      return isReadonly ? readonly(res) : reactive(res)
    }
    return res
  }
}

这种设计确保了无论对象嵌套多深，每次访问都会返回对应的响应式代理。

数组的特殊处理

对于数组类型，Vue3做了针对性优化。当修改数组元素时，能够正确触发响应：

const list = reactive([{ value: 1 }, { value: 2 }])

// 修改嵌套对象会触发响应
list[0].value = 3 

// 直接设置数组元素也能工作
list[0] = { value: 4 } 

数组的处理逻辑主要在collectionHandlers.ts中实现，通过重写数组的变异方法（如push、pop等）来保证响应性。

避免重复代理

Vue3使用WeakMap来缓存已经代理过的对象，防止重复代理：

const reactiveMap = new WeakMap()

function reactive(target) {
  // 如果已经代理过，直接返回缓存
  const existingProxy = reactiveMap.get(target)
  if (existingProxy) return existingProxy
  
  // 创建新代理
  const proxy = new Proxy(target, baseHandlers)
  reactiveMap.set(target, proxy)
  return proxy
}

这种缓存机制确保了相同的原始对象总是返回同一个代理实例。

性能优化策略

深度响应式转换可能带来性能开销，Vue3提供了两种优化手段：

1. 浅层响应式：使用shallowReactive只代理第一层属性

const shallow = shallowReactive({
  nested: { count: 0 } // nested不会被自动代理
})

2. 手动标记非响应式：使用markRaw跳过代理

const rawObj = markRaw({ count: 0 })
const obj = reactive({ nested: rawObj }) // nested保持原始对象

与Vue2的对比

Vue2使用Object.defineProperty实现响应式，需要预先递归转换整个对象：

// Vue2方式 - 初始化时就递归转换
new Vue({
  data() {
    return { nested: { count: 0 } } // 立即转换nested
  }
})

而Vue3的懒代理策略在性能和内存使用上更有优势，特别是对于大型深层嵌套对象。

实际应用场景

考虑一个表单组件处理嵌套数据结构：

const form = reactive({
  user: {
    name: '',
    address: {
      city: '',
      street: ''
    }
  },
  preferences: {
    notifications: true,
    theme: 'light'
  }
})

// 模板中可以直接绑定深层属性
watch(() => form.user.address.city, (newVal) => {
  console.log('城市变更:', newVal)
})

这种嵌套响应式处理使得复杂状态管理更加直观，无需手动处理每一层的响应性。

边界情况处理

某些特殊场景需要注意：

1. 原型链属性：不会触发响应

const parent = { count: 1 }
const child = reactive(Object.create(parent))
console.log(child.count) // 1，但修改parent.count不会触发响应

2. Symbol属性：默认会被代理

const sym = Symbol()
const obj = reactive({ [sym]: 'value' })
console.log(obj[sym]) // 响应式访问

3. 循环引用：会自动处理

const obj = {}
obj.self = obj
const reactiveObj = reactive(obj) // 不会栈溢出

响应式对象标识

由于每次访问嵌套对象都会返回相同的代理实例，可以用严格相等判断：

const obj = reactive({ nested: {} })
console.log(obj.nested === obj.nested) // true

这个特性在依赖收集和组件更新优化中起到关键作用。

与Ref的配合使用

当嵌套对象中包含ref时，Vue3会自动解包：

const count = ref(0)
const obj = reactive({ count })

console.log(obj.count) // 0，不需要.value
obj.count++ // 直接修改

这种自动解包机制使得ref和reactive可以混合使用而不产生冲突。

源码关键位置

主要实现分布在几个核心文件：

1. packages/reactivity/src/reactive.ts - 核心代理逻辑
2. packages/reactivity/src/baseHandlers.ts - 基本代理处理器
3. packages/reactivity/src/collectionHandlers.ts - 集合类型处理器

其中createReactiveObject函数是创建响应式对象的入口点，处理了缓存、只读代理等逻辑。