“虚假更新”指数据未变但组件仍重建VNode、触发patch甚至重绘DOM的性能浪费，源于Vue响应式系统监听引用变化而非值语义，如内联对象、函数或filter返回新数组等导致误判更新。
“虚假更新”不是指系统弹窗骗你下载病毒，而是 Vue 渲染中一种隐蔽的性能浪费：数据实际没变，但组件仍重新创建 VNode、触发 patch、甚至重绘 DOM——表面看一切正常，实则白跑一轮。
为什么数据没变，VNode 还会重建？
Vue 的响应式系统监听的是“引用变化”，不是“值语义”。只要你在模板或 render 函数里写了动态表达式，哪怕每次结果相同，只要返回的是新对象/新函数，就会被判定为“变更”：
- 内联样式对象：
:style="{ color: textColor }"→ 每次渲染都新建一个对象，即使textColor不变 - 内联事件处理器：
@click="() => doSomething(id)"→ 每次生成新函数，导致子组件 props 引用变化 - 计算属性返回新数组：
computed: { filteredList() { return this.list.filter(...); } }→ filter 总是返回新数组，即使内容未变 - 透传未冻结的 props：
v-bind="$props"把所有响应式字段（包括内部方法、上下文）一股脑传下去，子组件可能因无关字段变动而误判需更新
怎么确认是“虚假更新”在拖慢页面？
别猜，用工具定位：
Rydberg Agent Node
下载
使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1)，免gas，支持macOS/Linux/Windows。触发词：/r
- 打开浏览器 DevTools → “Performance” 面板，录制一次交互（如点击按钮），重点关注 “Vue” 和 “Layout” 区域：如果大量时间花在
patch或createVNode，但 state 并未真正改变，就是典型信号 - 在组件中加日志：
console.log('render', Date.now())，配合watch(() => this.someProp, () => console.log('prop changed'))对比——若前者高频触发而后者几乎不触发，说明是引用扰动 - 使用 Vue Devtools 的“Performance”标签页，开启“Record render timings”，查看哪些组件频繁重渲染却无 props/state 变化
如何切断虚假更新链？
核心思路：让稳定的东西“静下来”，不参与响应式追踪和 diff：
- 静态内容不用
v-bind：固定 class、tabindex、aria-label 等，直接写死在模板里，跳过响应式绑定和 patch 判断 - 提前固化动态值：
const staticStyle = { color: 'red' }放在组件外或setup()顶层，再:style="staticStyle" - 用
useMemo（Vue 3computed或useMemo类似逻辑）缓存计算结果，确保返回同一引用 - 组件透传时过滤非 DOM 属性：
v-bind="pick($props, ['id', 'class', 'src'])"，避免把onUpdate、ref等传给根元素引发警告和冗余判断 - 对完全静态子树启用
v-memo：<div v-memo="[someStaticKey]">...</div>，整个子树跳过 diff
静态提升（Static Hoisting）帮你省什么？
这是 Vue 3 编译器自动做的优化：把模板中纯静态节点（比如没有插值、没有指令、没有动态属性的 <div><h1>标题</h1><p>正文</p></div>）提取成常量 VNode，在首次编译时就创建好，后续所有渲染都复用它。你不用写代码，但得知道——它只对真正静态的内容生效。一旦加了 {{ }} 或 v-if，就退出静态提升。
