Vue3 响应式数据太多导致页面卡顿？教你利用 shallowRef 极致提效-Vue.js-PHP中文网

vue3页面卡顿主因是响应式系统过度代理：shallowref仅监听引用替换，避免深层递归代理，适用于万级列表、json配置等场景；实测5万条数据初始化从1200ms降至260ms，更新耗时减至180ms。

vue3 响应式数据太多导致页面卡顿？教你利用 shallowref 极致提效

Vue3 页面卡顿，很多时候不是代码写得不好，而是响应式系统“管得太宽”——尤其当你把上万条数据、深层嵌套对象一股脑交给 ref 或 reactive 时，Vue 会逐层递归代理，光是初始化就吃掉大量 CPU，后续更新更是一场性能灾难。

关键不在“要不要响应式”，而在“哪一层需要响应式”。

用 shallowRef 控制响应式深度

shallowRef 不是对值做深层代理，它只监听 .value 引用本身的替换，内部数据完全“裸奔”，不进 Proxy，不触发依赖收集，也不参与 diff。

适合场景：

表格/列表数据（如后端返回的 10 万条用户记录）
JSON 配置对象（只在加载或重置时整体替换）
画布坐标、图表原始数据等无需细粒度响应的结构

import { shallowRef } from 'vue'

// ✅ 安全：大数据量初始化快，更新不触发深层追踪
const rawData = shallowRef<user>([])

// ✅ 正确更新方式：必须替换整个引用
fetch('/api/users')
  .then(res => res.json())
  .then(data => {
    rawData.value = data // 触发更新
  })

// ❌ 错误：直接改内部字段不会触发视图更新
// rawData.value[0].name = 'New Name' → 无效</user>

和 shallowReactive 配合使用更灵活

shallowReactive 适用于你希望对象顶层属性变化可响应，但不想穿透到嵌套层级的情况：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

const user = shallowReactive({
  id: 1,
  profile: { name: 'Alice', avatar: '/a.png' },
  stats: { loginCount: 120 }
})

user.id = 2          // ✅ 响应式，触发更新
user.profile.name = 'Bob'  // ❌ 不响应（profile 是普通对象）

组合策略示例：

const state = shallowReactive({
  list: shallowRef([]),     // 列表整体替换才更新
  loading: false,           // 简单布尔值，浅层足够
  filter: reactive({       // 少量、需细粒度响应的配置
    keyword: '',
    status: 'active'
  })
})