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></card> 渲染一只股票。v-memo 不应加在整张卡片外层，而应落在卡片内容区最内层、变化最频繁的部分：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章