v-memo 应仅包裹股票行情区域并依赖 price 和 changePercent 字段，避免包含 timestamp 等非视觉变化字段；须与 v-for 同元素使用，key 用 code 而非 index，禁用空数组或对象全量引用。
直接用 v-memo 包裹每只股票的渲染单元，只在价格、涨跌幅或时间戳变化时才重绘，其余字段（如代码、名称）不变则完全跳过 diff 和 VNode 重建——这是 Vue 3.2+ 高频看板最轻量、最有效的提效方式。
锁定关键依赖，避开无效刷新
股票数据高频更新，但并非所有字段都每秒变动。例如：code 和 name 固定不变，timestamp 每秒更新，price 和 changePercent 按行情推送频率变化。v-memo 的价值就在于只响应真正影响显示的变量：
- 把
[stock.code, stock.price, stock.changePercent, stock.timestamp]当作依赖数组，是常见误区——timestamp每秒变，等于每秒都强制重渲染 - 正确做法是剔除“仅用于刷新标记”的字段，只保留视觉输出强相关的值，比如
[stock.price, stock.changePercent] - 若需保留最后更新时间提示（如“更新于 10:23:45”），可单独抽离为一个不带 v-memo 的小 span，或用计算属性格式化后参与依赖
配合 shadcn-vue Card 组件精准控制粒度
在卡片式看板中，每个 <Card> 渲染一只股票。v-memo 不应加在整张卡片外层，而应落在卡片内容区最内层、变化最频繁的部分：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 错误：给整个
<Card>加 v-memo，会把 header（固定文字）、footer（操作按钮）等静态内容也纳入缓存判断，反而增加比对开销 - 推荐：只包裹实时行情区域，例如
<CardContent>内部的<StockTicker>或价格数字区块 - 示例结构：
<Card>
<CardHeader>{{ stock.code }} {{ stock.name }}</CardHeader>
<CardContent>
<div v-memo="[stock.price, stock.changePercent]">
<span class="price">{{ stock.price }}</span>
<span :class="{ 'up': stock.changePercent > 0 }">{{ stock.changePercent }}%</span>
</div>
</CardContent>
</Card>
避免与 v-for 错配导致失效
Vue 3.4+ 要求 v-memo 必须和 v-for 同一元素上使用，否则触发警告且不生效。股票列表通常用 v-for 渲染，这点必须严格遵循：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
<div v-for="s in stocks" :key="s.code" v-memo="[s.price, s.changePercent]">...</div> - ❌ 错误写法：把 v-memo 放在 v-for 内部嵌套的 div 上，而外层循环元素没加 —— 缓存逻辑无法绑定到列表项生命周期
- 注意 key 仍需保持唯一且稳定（推荐用
stock.code，不用index），否则 v-memo 依赖比对会错位
警惕空数组陷阱与过度缓存
v-memo="[]" 等价于 v-once，对股票看板完全不适用——它会让价格永远停在首次渲染值，失去实时性。同时也要防止“缓存太深”：
- 不要为整块看板加一个全局 v-memo，比如包住全部
<Card>的父容器，这会让新增/删除股票时无法响应 - 避免在依赖数组里传入对象全量引用（如
[stock]），因为对象引用每次都会变，缓存形同虚设；务必拆解为具体字段 - 调试时可在控制台观察：点击行情模拟按钮后，仅目标 price 元素更新，其他未变字段的 DOM 节点不触发 patch，说明 v-memo 已生效
