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
categories:
vue
tags:
基础入门
Vue.js 浅响应式性能优化状态管理shallowReactiveshallowRef外部库集成
扫描二维码关注或者微信搜一搜：
编程智域 前端至全栈交流与成长
发现1000+提升效率与开发的AI工具和实用程序：https://tools.cmdragon.cn/
浅响应式的概念：与深层响应式的区别
Vue 的响应式系统默认是深层响应式的——当你用
reactive
ref
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 // ❌ 不会触发更新
注意：
shallowRef
.value
reactive
value
shallowRef
浅响应式的应用场景：性能优化与外部状态管理
浅响应式不是“替代”深层响应式，而是补充——当你需要减少响应式开销或不希望Vue跟踪内部状态时使用：
场景1：处理大型对象
如果你的对象包含大量数据（比如表格的 thousands 条记录），但只需要跟踪顶层状态（如
isLoading
currentPage
shallowReactive
const tableState = shallowReactive({
isLoading: true,
currentPage: 1,
data: [] // 大数组，内部变化无需Vue跟踪
})
场景2：外部管理的状态
如果对象的内部状态由外部库管理（比如 axios 的响应对象、Redux 的 store、第三方组件的状态），Vue 不需要跟踪其内部变化，用浅响应式更合适：
import { shallowRef } from 'vue'
import axios from 'axios'
// 用shallowRef包裹axios响应，只跟踪.value的替换
const response = shallowRef(null)
const fetchData = async () => {
const res = await axios.get('/api/data')
response.value = res.data // ✅ 触发更新（替换.value）
}
实践示例：用shallowReactive管理外部API状态
假设你有一个用户详情页，需要：
跟踪
isLoading
完整组件代码
<script setup>
import { shallowReactive } from 'vue'
// 浅响应式状态：只跟踪顶层属性
const userState = shallowReactive({
isLoading: true,
userData: null // 由API填充，内部变化不触发Vue更新
})
// 模拟API请求
const fetchUser = async () => {
userState.isLoading = true
// 假设userData由外部API返回，内部状态无需Vue跟踪
const res = await fetch('/api/user/1')
const data = await res.json()
userState.userData = data // ✅ 触发更新（替换顶层属性userData）
userState.isLoading = false // ✅ 触发更新（修改顶层属性isLoading）
}
// 初始化加载
fetchUser()
</script>
<template>
<div class="user-page">
<!-- 加载状态（响应式） -->
<div v-if="userState.isLoading" class="loading">加载中...</div>
<!-- 用户数据（非响应式内部变化） -->
<div v-else class="user-details">
<h2>{{ userState.userData.name }}</h2>
<p>年龄：{{ userState.userData.age }}</p>
<p>邮箱：{{ userState.userData.email }}</p>
</div>
</div>
</template>
效果说明
当
isLoading
userData
userData
name
userState.userData.name = 'Bob'
课后Quiz：巩固浅响应式知识
问题1（多选）
以下关于
shallowReactive
A.
shallowReactive
B.
shallowReactive
C. 修改
shallowReactive
D. 替换
shallowReactive
答案：B、D
解析：
shallowReactive
state.b = { new: 'data' }
问题2（单选）
当使用
shallowRef
A. 修改
ref.value
obj.value.a = 2
B. 替换
ref.value
obj.value = { a: 2 }
C. 修改
ref
.value
obj.a = 2
D. 以上都不会
答案：B
解析：
shallowRef
.value
ref
a
.value
常见报错与解决方案
报错场景1：修改shallowRef内部属性不触发更新
错误代码：
<script setup>
import { shallowRef } from 'vue'
const user = shallowRef({ name: 'Alice' })
// 修改内部属性，但页面不更新
const changeName = () => {
user.value.name = 'Bob'
}
</script>
<template>
<p>{{ user.value.name }}</p>
<button @click="changeName">改名</button>
</template>
原因：
shallowRef
.value
解决方案：
改用
ref
import { ref } from 'vue'
const user = ref({ name: 'Alice' })
手动触发更新（用
triggerRef
import { shallowRef, triggerRef } from 'vue'
const user = shallowRef({ name: 'Alice' })
const changeName = () => {
user.value.name = 'Bob'
triggerRef(user) // ✅ 手动触发更新
}
报错场景2：修改shallowReactive嵌套属性不触发更新
错误代码：
<script setup>
import { shallowReactive } from 'vue'
const state = shallowReactive({
user: { name: 'Alice' }
})
// 修改嵌套属性，页面不更新
const changeName = () => {
state.user.name = 'Bob'
}
</script>
<template>
<p>{{ state.user.name }}</p>
<button @click="changeName">改名</button>
</template>
原因：
shallowReactive
解决方案：
改用
reactive
import { reactive } from 'vue'
const state = reactive({ user: { name: 'Alice' } })
替换嵌套对象引用（触发顶层属性变化）：
const changeName = () => {
state.user = { ...state.user, name: 'Bob' } // ✅ 替换引用，触发更新
}
参考链接
Vue 官方文档：Shallow Reactivity
余下文章内容请点击跳转至 个人博客页面 或者 扫描二维码关注或者微信搜一搜：
编程智域 前端至全栈交流与成长
往期文章归档
Vue 3组合式API中ref与reactive的核心响应式差异及使用最佳实践是什么？ – cmdragon’s BlogVue 3组合式API中ref与reactive的核心响应式差异及使用最佳实践是什么？ – cmdragon’s BlogVue3响应式系统中，对象新增属性、数组改索引、原始值代理的问题如何解决？ – cmdragon’s BlogVue 3中watch侦听器的正确使用姿势你掌握了吗？深度监听、与watchEffect的差异及常见报错解析 – cmdragon’s BlogVue响应式声明的API差异、底层原理与常见陷阱你都搞懂了吗 – cmdragon’s BlogVue响应式声明的API差异、底层原理与常见陷阱你都搞懂了吗 – cmdragon’s Blog为什么Vue 3需要ref函数？它的响应式原理与正确用法是什么？ – cmdragon’s BlogVue 3中reactive函数如何通过Proxy实现响应式？使用时要避开哪些误区？ – cmdragon’s BlogVue3响应式系统的底层原理与实践要点你真的懂吗？ – cmdragon’s BlogVue 3模板如何通过编译三阶段实现从声明式语法到高效渲染的跨越 – cmdragon’s Blog快速入门Vue模板引用：从收DOM“快递”到调子组件方法，你玩明白了吗？ – cmdragon’s Blog快速入门Vue模板里的JS表达式有啥不能碰？计算属性为啥比方法更能打？ – cmdragon’s Blog快速入门Vue的v-model表单绑定：语法糖、动态值、修饰符的小技巧你都掌握了吗？ – cmdragon’s Blog快速入门Vue3事件处理的挑战题：v-on、修饰符、自定义事件你能通关吗？ – cmdragon’s Blog快速入门Vue3的v-指令：数据和DOM的“翻译官”到底有多少本事？ – cmdragon’s Blog快速入门Vue3，插值、动态绑定和避坑技巧你都搞懂了吗？ – cmdragon’s Blog想让PostgreSQL快到飞起？先找健康密码还是先换引擎？ – cmdragon’s Blog想让PostgreSQL查询快到飞起？分区表、物化视图、并行查询这三招灵不灵？ – cmdragon’s Blog子查询总拖慢查询？把它变成连接就能解决？ – cmdragon’s BlogPostgreSQL全表扫描慢到崩溃？建索引+改查询+更统计信息三招能破？ – cmdragon’s Blog复杂查询总拖后腿？PostgreSQL多列索引+覆盖索引的神仙技巧你get没？ – cmdragon’s Blog只给表子集建索引？用函数结果建索引？PostgreSQL这俩操作凭啥能省空间又加速？ – cmdragon’s BlogB-tree索引像字典查词一样工作？那哪些数据库查询它能加速，哪些不能？ – cmdragon’s Blog想抓PostgreSQL里的慢SQL？pg_stat_statements基础黑匣子和pg_stat_monitor时间窗，谁能帮你更准揪出性能小偷？ – cmdragon’s BlogPostgreSQL的“时光机”MVCC和锁机制是怎么搞定高并发的？ – cmdragon’s BlogPostgreSQL性能暴涨的关键？内存IO并发参数居然要这么设置？ – cmdragon’s Blog大表查询慢到翻遍整个书架？PostgreSQL分区表教你怎么“分类”才高效PostgreSQL 查询慢？是不是忘了优化 GROUP BY、ORDER BY 和窗口函数？ – cmdragon’s BlogPostgreSQL里的子查询和CTE居然在性能上“掐架”？到底该站哪边？ – cmdragon’s BlogPostgreSQL选Join策略有啥小九九？Nested Loop/Merge/Hash谁是它的菜？ – cmdragon’s BlogPostgreSQL新手SQL总翻车？这7个性能陷阱你踩过没？ – cmdragon’s BlogPostgreSQL索引选B-Tree还是GiST？“瑞士军刀”和“多面手”的差别你居然还不知道？ – cmdragon’s Blog想知道数据库怎么给查询“算成本选路线”？EXPLAIN能帮你看明白？ – cmdragon’s BlogPostgreSQL处理SQL居然像做蛋糕？解析到执行的4步里藏着多少查询优化的小心机？ – cmdragon’s BlogPostgreSQL备份不是复制文件？物理vs逻辑咋选？误删还能精准恢复到1分钟前？ – cmdragon’s Blog转账不翻车、并发不干扰，PostgreSQL的ACID特性到底有啥魔法？ – cmdragon’s Blog银行转账不白扣钱、电商下单不超卖，PostgreSQL事务的诀窍是啥？ – cmdragon’s BlogPostgreSQL里的PL/pgSQL到底是啥？能让SQL从“说目标”变“讲步骤”？ – cmdragon’s BlogPostgreSQL视图不存数据？那它怎么简化查询还能递归生成序列和控制权限？ – cmdragon’s BlogPostgreSQL索引这么玩，才能让你的查询真的“飞”起来？ – cmdragon’s BlogPostgreSQL的表关系和约束，咋帮你搞定用户订单不混乱、学生选课不重复？ – cmdragon’s BlogPostgreSQL查询的筛子、排序、聚合、分组？你会用它们搞定数据吗？ – cmdragon’s BlogPostgreSQL数据类型怎么选才高效不踩坑？ – cmdragon’s Blog想解锁PostgreSQL查询从基础到进阶的核心知识点？你都get了吗？ – cmdragon’s BlogPostgreSQL DELETE居然有这些操作？返回数据、连表删你试过没？ – cmdragon’s BlogPostgreSQL UPDATE语句怎么玩？从改邮箱到批量更新的避坑技巧你都会吗？ – cmdragon’s BlogPostgreSQL插入数据还在逐条敲？批量、冲突处理、返回自增ID的技巧你会吗？ – cmdragon’s BlogPostgreSQL的“仓库-房间-货架”游戏，你能建出电商数据库和表吗？ – cmdragon’s BlogPostgreSQL 17安装总翻车？Windows/macOS/Linux避坑指南帮你搞定？ – cmdragon’s Blog能当关系型数据库还能玩对象特性，能拆复杂查询还能自动管库存，PostgreSQL凭什么这么香？ – cmdragon’s Blog给接口加新字段又不搞崩老客户端？FastAPI的多版本API靠哪三招实现？ – cmdragon’s Blog流量突增要搞崩FastAPI？熔断测试是怎么防系统雪崩的？ – cmdragon’s BlogFastAPI秒杀库存总变负数？Redis分布式锁能帮你守住底线吗 – cmdragon’s BlogFastAPI的CI流水线怎么自动测端点，还能让Allure报告美到犯规？ – cmdragon’s Blog如何用GitHub Actions为FastAPI项目打造自动化测试流水线？ – cmdragon’s Blog如何用Git Hook和CI流水线为FastAPI项目保驾护航？ – cmdragon’s BlogFastAPI如何用契约测试确保API的「菜单」与「菜品」一致？为什么TDD能让你的FastAPI开发飞起来？ – cmdragon’s Blog如何用FastAPI玩转多模块测试与异步任务，让代码不再“闹脾气”？ – cmdragon’s Blog 免费好用的热门在线工具
RAID 计算器 – 应用商店 | By cmdragon在线PS – 应用商店 | By cmdragonMermaid 在线编辑器 – 应用商店 | By cmdragon数学求解计算器 – 应用商店 | By cmdragon智能提词器 – 应用商店 | By cmdragon魔法简历 – 应用商店 | By cmdragonImage Puzzle Tool – 图片拼图工具 | By cmdragon字幕下载工具 – 应用商店 | By cmdragon歌词生成工具 – 应用商店 | By cmdragon网盘资源聚合搜索 – 应用商店 | By cmdragonASCII字符画生成器 – 应用商店 | By cmdragonJSON Web Tokens 工具 – 应用商店 | By cmdragonBcrypt 密码工具 – 应用商店 | By cmdragonGIF 合成器 – 应用商店 | By cmdragonGIF 分解器 – 应用商店 | By cmdragon文本隐写术 – 应用商店 | By cmdragonCMDragon 在线工具 – 高级AI工具箱与开发者套件 | 免费好用的在线工具应用商店 – 发现1000+提升效率与开发的AI工具和实用程序 | 免费好用的在线工具CMDragon 更新日志 – 最新更新、功能与改进 | 免费好用的在线工具支持我们 – 成为赞助者 | 免费好用的在线工具AI文本生成图像 – 应用商店 | 免费好用的在线工具临时邮箱 – 应用商店 | 免费好用的在线工具二维码解析器 – 应用商店 | 免费好用的在线工具文本转思维导图 – 应用商店 | 免费好用的在线工具正则表达式可视化工具 – 应用商店 | 免费好用的在线工具文件隐写工具 – 应用商店 | 免费好用的在线工具IPTV 频道探索器 – 应用商店 | 免费好用的在线工具快传 – 应用商店 | 免费好用的在线工具随机抽奖工具 – 应用商店 | 免费好用的在线工具动漫场景查找器 – 应用商店 | 免费好用的在线工具时间工具箱 – 应用商店 | 免费好用的在线工具网速测试 – 应用商店 | 免费好用的在线工具AI 智能抠图工具 – 应用商店 | 免费好用的在线工具背景替换工具 – 应用商店 | 免费好用的在线工具艺术二维码生成器 – 应用商店 | 免费好用的在线工具Open Graph 元标签生成器 – 应用商店 | 免费好用的在线工具图像对比工具 – 应用商店 | 免费好用的在线工具图片压缩专业版 – 应用商店 | 免费好用的在线工具密码生成器 – 应用商店 | 免费好用的在线工具SVG优化器 – 应用商店 | 免费好用的在线工具调色板生成器 – 应用商店 | 免费好用的在线工具在线节拍器 – 应用商店 | 免费好用的在线工具IP归属地查询 – 应用商店 | 免费好用的在线工具CSS网格布局生成器 – 应用商店 | 免费好用的在线工具邮箱验证工具 – 应用商店 | 免费好用的在线工具书法练习字帖 – 应用商店 | 免费好用的在线工具金融计算器套件 – 应用商店 | 免费好用的在线工具中国亲戚关系计算器 – 应用商店 | 免费好用的在线工具Protocol Buffer 工具箱 – 应用商店 | 免费好用的在线工具IP归属地查询 – 应用商店 | 免费好用的在线工具图片无损放大 – 应用商店 | 免费好用的在线工具文本比较工具 – 应用商店 | 免费好用的在线工具IP批量查询工具 – 应用商店 | 免费好用的在线工具域名查询工具 – 应用商店 | 免费好用的在线工具DNS工具箱 – 应用商店 | 免费好用的在线工具网站图标生成器 – 应用商店 | 免费好用的在线工具XML Sitemap
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...