浅层响应式(shallowReactive/shallowRef)

浅层响应式(shallowReactive/shallowRef)的概念

Vue3的响应式系统提供了两种浅层响应式API：shallowReactive和shallowRef。它们与标准的reactive和ref类似，但只对对象的第一层属性或基本值进行响应式追踪。这种设计在特定场景下能显著提升性能，特别是当处理大型对象或不需要深度响应式的数据结构时。

import { reactive, shallowReactive, ref, shallowRef } from 'vue'

// 标准响应式
const deepObj = reactive({ 
  nested: { count: 0 } 
})
// 浅层响应式
const shallowObj = shallowReactive({ 
  nested: { count: 0 } 
})

shallowReactive的工作原理

shallowReactive只会对对象的直接属性创建响应式代理，嵌套对象保持原样。这意味着修改嵌套属性不会触发视图更新：

const state = shallowReactive({
  level1: {
    level2: { value: 'test' }
  }
})

// 这会触发响应式更新
state.level1 = { newValue: 'changed' }

// 这不会触发响应式更新
state.level1.level2.value = 'new value'

这种特性在处理大型配置对象或第三方库返回的对象时特别有用，可以避免不必要的响应式开销。

shallowRef的独特行为

shallowRef与常规ref的主要区别在于它不会对其.value进行深度响应式转换：

const deepRef = ref({ count: 0 })
const shallow = shallowRef({ count: 0 })

// 标准ref - 会触发更新
deepRef.value.count++

// shallowRef - 不会触发更新
shallow.value.count++ 

// shallowRef - 只有.value被替换才会触发更新
shallow.value = { count: 1 }

性能优化场景

浅层响应式在以下场景能带来明显性能提升：

1. 大型列表渲染：当列表项包含复杂嵌套结构但只需要跟踪顶层变化时

const bigList = shallowRef([
  { id: 1, data: { /* 大量嵌套数据 */ } },
  // ...数百个类似对象
])

2. 第三方库集成：当需要包装非Vue管理的对象时

const thirdPartyObj = shallowReactive(someLibrary.getComplexConfig())

3. 不可变数据模式：配合Object.assign或展开运算符使用

const state = shallowRef({ items: [] })

function update() {
  state.value = { 
    ...state.value, 
    items: [...state.value.items, newItem] 
  }
}

与watch的配合使用

浅层响应式与watch配合时需要特别注意：

const state = shallowReactive({ nested: { value: 0 } })

// 默认不会深度监听
watch(() => state.nested.value, (newVal) => {
  console.log('不会触发', newVal)
})

// 需要显式指定deep: true
watch(() => state.nested.value, (newVal) => {
  console.log('会触发', newVal)
}, { deep: true })

实际应用案例

在表格组件中处理行数据：

// 表格组件
setup() {
  const rows = shallowRef([])
  
  async function loadData() {
    const data = await fetchLargeDataset()
    rows.value = data.map(item => ({ 
      ...item,
      metadata: JSON.parse(item.metadata) 
    }))
  }
  
  function updateRow(index, newData) {
    const newRows = [...rows.value]
    newRows[index] = { ...newRows[index], ...newData }
    rows.value = newRows
  }
  
  return { rows, updateRow }
}

与Reactivity Transform的关系

Vue3的Reactivity Transform语法糖也能与浅层响应式配合使用：

const $ = reactiveTransform()

const count = $(shallowRef(0))
const state = $(shallowReactive({ nested: {} }))

// 自动解包.value
count++  
// 但嵌套属性仍保持非响应式
state.nested.value = 123 // 不会触发更新

边界情况处理

使用浅层响应式时需要注意几个特殊场景：

1. 数组操作：直接修改数组元素不会触发更新

const list = shallowReactive([{ id: 1 }, { id: 2 }])
list[0].id = 3 // 无反应
list.length = 1 // 会触发

2. 解构赋值：会失去响应性

const state = shallowReactive({ x: 1, y: 2 })
const { x } = state // x不再是响应式的

3. 模板中使用：在模板中访问嵌套属性会显示最新值但不会触发依赖收集

<div>{{ shallowObj.nested.value }}</div>
<!-- 手动修改nested.value不会更新视图 -->

类型系统集成

在TypeScript中使用时，浅层响应式API保持了完整的类型提示：

interface User {
  id: number
  profile: {
    name: string
    age: number
  }
}

const user = shallowReactive<User>({
  id: 1,
  profile: { name: 'Alice', age: 30 }
})

// 类型检查正常工作
user.id = '2' // 类型错误
user.profile.name = 123 // 类型错误

与Vuex/Pinia的对比

状态管理库通常采用深度响应式，但在某些模块可以使用浅层响应式优化：

// 在Pinia store中
export const useBigDataStore = defineStore('big', () => {
  const dataset = shallowRef<BigDataType>(null)
  
  function partialUpdate(path: string[], value: any) {
    // 手动控制更新逻辑
  }
  
  return { dataset, partialUpdate }
})

调试技巧

在开发者工具中识别浅层响应式对象：

1. Chrome Vue Devtools会显示[ShallowReactive]或[ShallowRef]标签
2. 控制台打印时可以通过__v_isShallow标识识别
3. 使用markRaw显式标记非响应式部分：

const rawData = { /* 大数据结构 */ }
markRaw(rawData)

const state = shallowReactive({
  config: rawData // 明确不追踪
})

组合式函数中的应用

编写可复用的组合式函数时，浅层响应式可以提供更灵活的选项：

export function usePagination(initialOptions) {
  const options = shallowReactive({
    page: 1,
    pageSize: 10,
    ...initialOptions
  })
  
  const data = shallowRef([])
  
  async function load() {
    data.value = await fetchData(options)
  }
  
  return {
    options,
    data,
    load
  }
}

与v-model的集成

浅层响应式可以与v-model配合使用，但需要注意值替换策略：

<template>
  <!-- 对于shallowRef需要手动处理 -->
  <input 
    :value="shallowValue.value" 
    @input="shallowValue.value = $event.target.value"
  >
  
  <!-- shallowReactive可以直接使用 -->
  <input v-model="shallowState.field">
</template>

<script setup>
const shallowValue = shallowRef('')
const shallowState = shallowReactive({ field: '' })
</script>

内存管理考量

浅层响应式可以减少Vue响应式系统的内存开销，特别是在以下情况：

1. 短期存在的大型临时对象
2. 频繁创建销毁的组件状态
3. 作为中间计算结果的复杂数据结构

function processData(input) {
  // 临时大型对象使用浅层响应式
  const tempState = shallowReactive(transformData(input))
  // ...处理逻辑
  return extractResult(tempState) // 完成后自动回收
}

测试策略

针对使用浅层响应式的代码，测试时需要特别注意：

// 测试示例
test('shallowRef update', async () => {
  const value = shallowRef({ count: 0 })
  
  // 替换整个值会触发
  value.value = { count: 1 }
  await nextTick()
  expect(/* ... */)
  
  // 修改属性不会触发
  value.value.count++
  await nextTick()
  // 这里断言需要特殊处理
})

与Vue2的兼容性考虑

对于需要同时支持Vue2和Vue3的库，可以通过适配器模式提供浅层响应式：

function createShallowReactive(obj) {
  return isVue3 
    ? shallowReactive(obj)
    : Object.defineProperties({}, /* 手动实现浅层追踪 */)
}