把纯静态路由表、常量字典或巨型不可变 JSON 全量 reactive 化，在 Vue 中主要浪费什么，应该怎么降级？

先用最小代码看清现象

下面的片段只演示“Vue 静态配置过度响应式 性能浪费 降级”最关键的一步。先顺着正常路径读一遍，再改动一个输入，就能直接看到结论在什么条件下成立。

阅读时重点找出哪一行对应“多余代理与深层追踪带来内存/初始化成本，静态数据用 markRaw/shallowRef/普通常量”，然后观察依赖是否被追踪、组件是否更新以及侦听回调的执行时机。这样比从定义开始背更容易留下具体印象。

<!-- 把纯静态路由表、常量字典或巨型不可变 JSON 全量 reactive 化，在 Vue 中主要浪费什么，应该怎么降级？; 观察点：多余代理与深层追踪带来内存/初始化成本，静态数据用 markRaw/shallowRef/普通常量 -->
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
watch(count, (value, oldValue) => console.log({ value, oldValue }))
</script>

<template><button @click="count++">{{ doubled }}</button></template>

代码背后的原因

多余代理与深层追踪带来内存/初始化成本，静态数据用 markRaw/shallowRef/普通常量。示例把这个机制放进了真实的 API、语法或配置中，因此要关注产生结果的操作，而不是把整段代码当成固定模板照抄。

先确认数据是 ref、reactive、计算值还是普通变量，再看读取发生在哪个响应式上下文。对“多余代理与深层追踪带来内存/初始化成本，静态数据用 markRaw/shallowRef/普通常量”来说，如果这个条件改变，相同代码可能进入另一条分支、返回不同状态，甚至根本不执行。

放到真实项目里怎么判断

解构、异步回调和生命周期边界可能丢失响应关系或留下副作用，需要结合最小组件验证。验证“多余代理与深层追踪带来内存/初始化成本，静态数据用 markRaw/shallowRef/普通常量”时先保留正常路径，再增加一个直接相关的反例。一次只改一个条件，才能知道差异究竟来自哪里。

验证“Vue 静态配置过度响应式 性能浪费 降级”不能只看有没有报错，还要检查依赖是否被追踪、组件是否更新以及侦听回调的执行时机。涉及资源或异步任务时，也要确认结束后是否正确取消、关闭或释放。

容易答错的地方

记住结论，却忘了前提

只复述“多余代理与深层追踪带来内存/初始化成本，静态数据用 markRaw/shallowRef/普通常量”仍可能答错，因为它依赖先确认数据是 ref、reactive、计算值还是普通变量，再看读取发生在哪个响应式上下文。先说适用条件，再说结果。

用一次现象证明所有情况

单次成功只能说明当前输入可用。至少增加一个反例，并检查依赖是否被追踪、组件是否更新以及侦听回调的执行时机，才能区分偶然现象与稳定机制。

面试官还会怎么问？

把知识连起来