url: /posts/c85e1fe16a7ae45e965b4e2df4d9d2f4/
title: Vue浅响应式如何解决深层响应式的性能问题？适用场景有哪些？
date: 2025-11-14T01:59:18+08:00
lastmod: 2025-11-14T01:59:18+08:00
author: cmdragon
summary:
Vue 的响应式系统默认是深层响应式的，但深层代理可能带来性能开销。浅响应式（Shallow Reactivity）通过 shallowReactive 和 shallowRef 仅跟踪顶层属性的变化，避免递归代理嵌套对象。shallowReactive 只响应顶层属性的修改，而 shallowRef 仅跟踪 .value 的替换操作。浅响应式适用于处理大型对象或外部管理的状态，以减少响应式开销。通过浅响应式，Vue 可以更高效地管理状态，避免不必要的性能损耗。
categories:
- vue
tags:
- 基础入门
- Vue.js
- 浅响应式
- 性能优化
- 状态管理
- shallowReactive
- shallowRef
- 外部库集成
扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长
发现1000+提升效率与开发的AI工具和实用程序：https://tools.cmdragon.cn/
浅响应式的概念：与深层响应式的区别
Vue 的响应式系统默认是深层响应式的——当你用 reactive 或 ref 包裹对象时，Vue 会递归地将所有嵌套属性转换为响应式代理。比如：
import {
ref } from 'vue'
const obj = ref({
a: {
b: 1 } })
obj.value.a.b = 2 // 触发更新（深层响应式）这种行为很方便，但也会带来性能开销：如果对象非常大（比如包含 thousands 条数据的列表），或者内部状态由外部库管理（比如 axios 响应、第三方状态库），深层代理会浪费资源。
浅响应式（Shallow Reactivity）就是为了解决这个问题：它只跟踪顶层属性的变化，不处理嵌套对象的响应式。Vue 提供了两个 API 实现浅响应式：shallowReactive（对应 reactive）和 shallowRef（对应 ref）。
shallowReactive：只跟踪顶层属性的响应式对象
shallowReactive 是 reactive 的浅版本，它仅将对象的顶层属性转换为响应式，嵌套对象不会被代理。也就是说：
- 修改顶层属性（如
state.a）会触发更新； - 修改嵌套属性（如
state.b.c）不会触发更新； - 替换嵌套对象的引用（如
state.b = { new: 'data' }）会触发更新（因为b是顶层属性）。
示例代码
import {
shallowReactive } from 'vue'
// 创建浅响应式对象
const state = shallowReactive({
a: 1, // 顶层属性（响应式）
b: {
c: 2 } // 嵌套对象（非响应式）
})
// 1. 响应式变化：修改顶层属性
state.a = 2 // ✅ 触发组件更新
// 2. 非响应式变化：修改嵌套属性
state.b.c = 3 // ❌ 不会触发更新
// 3. 响应式变化：替换嵌套对象引用
state.b = {
c: 3 } // ✅ 触发更新（因为 b 是顶层属性）shallowRef：只跟踪.value变化的浅引用
shallowRef 是 ref 的浅版本，它仅跟踪 ref.value 的替换操作，不处理 value 内部的深层响应式。也就是说：
- 替换
ref.value（如obj.value = { new: 'data' }）会触发更新； - 修改
ref.value的内部属性（如obj.value.a = 2）不会触发更新。
示例代码
import {
shallowRef } from 'vue'
// 创建浅引用
const obj = shallowRef({
a: 1 })
// 1. 响应式变化：替换.value
obj.value = {
a: 2 } // ✅ 触发更新
// 2. 非响应式变化：修改.value内部属性
obj.value.a = 3 // ❌ 不会触发更新注意：sha