Vue 3 的 reactive 为行情数据提供响应式基础，需通过就地更新、节流控制和 computed/watch 实现高效安全的数据接入与视图同步。
Vue 3 的 reactive 本身不负责“处理”推送逻辑，而是为实时行情数据提供响应式基础——即让界面能自动感知并更新价格、盘口、成交明细等变化。关键在于：怎么把 WebSocket/SSE 推来的原始数据，安全、高效、可维护地接入 reactive 状态中。
以下从实际开发角度拆解核心要点：
用 reactive 管理行情状态结构
股票行情数据通常有固定结构（如最新价、五档买卖、分时数据），适合用 reactive 定义初始状态：
import { reactive } from 'vue'
const marketData = reactive({
symbol: 'AAPL',
lastPrice: 0,
change: 0,
volume: 0,
bids: [] as Array<{ price: number; size: number }>,
asks: [] as Array<{ price: number; size: number }>,
ticks: [] as Array<{ time: string; price: number; size: number; side: 'B' | 'S' }>
})✅ 优势：
立即学习“前端免费学习笔记（深入）”；
- 所有字段天然响应式，修改
marketData.lastPrice或marketData.bids[0].price都会触发视图更新 - 支持深层嵌套（如
bids[0].size变化也能响应） - 不需要
.value，写法简洁，适合高频更新场景
⚠️ 注意：数组直接通过索引赋值（如 bids[0] = {price: 182.5, size: 100}）是响应式的；但 bids.length = 0 或 bids.push(...) 也完全支持。
接收推送后，避免全量替换，优先就地更新
行情每秒可能推送几十条 tick 或盘口快照。不要每次 Object.assign(marketData, newData) 或新建对象，这会破坏响应式连接、触发多余 diff、影响性能。
推荐做法是细粒度更新：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
// 收到一笔新成交（tick）
function handleTick(tick: Tick) {
marketData.ticks.unshift(tick) // 响应式 push/unshift/splice 都 ok
if (marketData.ticks.length > 200) {
marketData.ticks.pop() // 自动触发列表重渲染
}
// 更新最新价和涨跌幅
const prev = marketData.lastPrice
marketData.lastPrice = tick.price
marketData.change = parseFloat((tick.price - prev).toFixed(2))
}
// 收到盘口快照（完整 bids/asks）
function handleDepth(snapshot: DepthSnapshot) {
// ✅ 就地清空再填充（保留原 reactive 数组引用）
marketData.bids.length = 0
snapshot.bids.forEach(b => marketData.bids.push(b))
marketData.asks.length = 0
snapshot.asks.forEach(a => marketData.asks.push(a))
}这样 Vue 的 reactivity 系统只追踪已有 proxy 对象的属性变更，不会重建整个响应式树，渲染更轻量。
处理高频更新时的防抖与节流控制
不是所有行情更新都需要立刻反映到 UI（尤其图表或滚动列表）。可在数据流入层加简单节流：
import { ref, nextTick } from 'vue'
const pendingUpdates = ref<(() => void)[]>([])
function queueUpdate(fn: () => void) {
pendingUpdates.value.push(fn)
if (pendingUpdates.value.length === 1) {
nextTick(() => {
pendingUpdates.value.forEach(f => f())
pendingUpdates.value = []
})
}
}
// 使用示例：每帧最多合并一次更新
function handleTick(tick) {
queueUpdate(() => {
marketData.lastPrice = tick.price
marketData.ticks.unshift(tick)
})
}这对避免 ticks 列表在 100ms 内被插入 5 次导致 5 次重排非常有效。
配合 computed 和 watch 做衍生计算
行情数据常需派生状态（如涨跌颜色、是否涨停、买卖差额），用 computed 最自然：
import { computed } from 'vue'
const isRising = computed(() => marketData.change > 0)
const bidAskSpread = computed(() => {
const bestBid = marketData.bids[0]?.price || 0
const bestAsk = marketData.asks[0]?.price || 0
return bestAsk - bestBid
})这些计算属性会自动缓存，并在 marketData.bids 或 marketData.asks 变化时精准重新求值。
如需副作用（比如价格跳动时播放音效），用 watch 监听特定字段：
watch(
() => marketData.lastPrice,
(newVal, oldVal) => {
if (Math.abs(newVal - oldVal) >= 0.5) {
playPriceJumpSound()
}
},
{ immediate: false }
)不复杂但容易忽略
