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,
asks: [] as Array,
ticks: [] as Array
})
✅ 优势：
- 所有字段天然响应式，修改
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-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章