vue3 reactive响应式会丢失？

我们公司一个新来的同事遇到了一个诡异的问题困他一下午：他从后端获取数据后，页面不再更新了。我看到他的代码惊呆了，罪过罪过 面试疏忽了。代码如下

// 前端定义的响应式数据
const tableData = reactive({
  list: [],
  pagination: { page: 1, pageSize: 10, total: 0 }
})

// 获取数据的方法
async function fetchData() {
  const res = await api.getList() // 假设返回 { list: [...], page: 2, total: 50 }
  
  // 直接整体赋值 ❌
  tableData = res
}

现象分析

• 第一次加载：正常显示数据
• 第二次加载：数据变化但页面不更新

一、原理深度解析：为什么响应式会丢失？

1. reactive() 的本质

const proxy = reactive(obj)

实际上创建的是 对象(obj)的代理，而不是变量(tableData)的代理

2. 直接赋值的后果

tableData = newValue

实际上做了三件事：

1. 创建了一个全新的变量引用
2. 切断了与原有响应式系统的联系
3. Vue 的依赖收集系统仍然追踪的是旧的代理对象

3. 内存示意图

初始状态：

tableData → ProxyA → { list: [], pagination: {...} }
           ↗
模板依赖

错误赋值后：

tableData → { list: [...], page: 2, total: 50 }  // 普通对象
ProxyA → { list: [], pagination: {...} }  // 被遗弃的代理
           ↗
模板依赖 (仍然追踪ProxyA)

二、正确解决方案（4种方式）

方案1：属性级赋值（如果代码对象有多层是推荐的）

async function fetchData() {
  const res = await api.getList()
  
  // 保持代理对象不变，仅替换属性 ✅
  tableData.list = res.list
  tableData.pagination = {
    page: res.page,
    pageSize: tableData.pagination.pageSize, // 保留原有值
    total: res.total
  }
}

优点：

• 保持原有代理对象不变
• 精确控制哪些字段需要更新
• 类型安全（TypeScript友好）

方案2：使用Object.assign合并（最常见使用方式）

async function fetchData() {
  const res = await api.getList()
  
  // 合并到原响应式对象 ✅
  Object.assign(tableData, {
    list: res.list,
    pagination: {
      ...tableData.pagination, // 保留原有分页配置
      page: res.page,
      total: res.total
    }
  })
}

方案3：使用reactive包裹响应数据（非常不推荐）

async function fetchData() {
  const res = await api.getList()
  
  // 创建新响应对象并整体替换 ✅
  const newData = reactive({
    list: res.list,
    pagination: {
      ...tableData.pagination,
      ...res
    }
  })
  
  // 必须配合toRefs在模板中使用
  return newData
}

// 组件中使用
const { tableData } = toRefs(useTableData())

方案4：使用ref代替reactive

const tableData = ref({
  list: [],
  pagination: { page: 1, pageSize: 10, total: 0 }
})

async function fetchData() {
  const res = await api.getList()
  
  // ref的value可以直接替换 ✅
  tableData.value = {
    list: res.list,
    pagination: {
      ...tableData.value.pagination,
      ...res
    }
  }
}

三、原理验证实验

我们可以通过简单实验验证：

const original = reactive({ count: 0 })
let copy = original

console.log(isReactive(original)) // true
console.log(isReactive(copy))     // true

copy = { count: 1 }  // 直接赋值

console.log(isReactive(original)) // true
console.log(isReactive(copy))     // false ❌ 响应式丢失

四、总结：响应式保活三原则

1. 引用保持：始终操作同一个代理对象
2. 属性更新：通过修改属性而非替换整个对象

记住：reactive() 创建的是值的代理 ，不是变量的代理。理解这一点，就能避免99%的响应式丢失问题！