vue reactive 状态维护大转盘奖品列表和中奖概率需结构清晰、响应及时、前后端协同可控：用 reactive 初始化奖品数组，接口赋值不 push；权重用于前端预演，真实结果以接口为准；状态可追溯复位，规避模板旋转错位与权重异常等陷阱。
Vue reactive 状态维护大转盘奖品列表和中奖概率数据，核心在于**结构清晰、响应及时、前后端协同可控**。不能只靠前端硬编码概率，也不能把奖品配置散落在组件内部——否则改个奖品顺序或调个中奖率就得改多处代码。
奖品列表用 reactive 包裹 + 显式初始化
奖品数据通常来自接口（如 getPrizeList()），需在 setup 或 store 中统一管理：
- 定义类型：每个奖品含
id、name、img、weight（权重值，用于概率计算）等字段 - 用
reactive([])初始化空数组，避免后续 push 导致响应失效 - 请求成功后直接赋值：
prizeList = response.data，不是prizeList.push(...) - 若需排序/过滤，用 computed 衍生，不修改原始 reactive 数据
中奖概率用权重数组 + 后端校验兜底
前端控制概率易被绕过，所以 reactive 状态只负责「展示逻辑」，关键逻辑交由后端：
- 奖品列表中每个项带
weight字段（如一等奖 weight=5，谢谢参与 weight=80） - 前端抽奖前，基于 weight 构建累计权重数组（如 [5, 15, 30, 110]），再用随机数二分查找目标索引
- 但该结果仅作 UI 预演；真实中奖结果必须以接口返回为准（
lottery()返回确定的 prizeId） - 用
ref(null)存当前中奖 ID，中奖后立即更新，触发视图响应
状态变更要可追溯、可复位
大转盘常需多次抽奖、重置状态， reactive 数据需支持快速还原：
- 抽完一次后，保留原始 prizeList 副本（如
originalPrizeList = JSON.parse(JSON.stringify(prizeList))） - 提供
resetState()方法：清空中奖 ID、重置旋转角度、关闭弹窗、恢复抽奖按钮可用 - 抽奖记录用
ref([])维护，每次中奖records.push({ prizeId, time: Date.now() })，天然响应
避免常见陷阱
几个容易忽略但影响稳定性的点：
- 不要在模板中直接写
v-for="(p, i) in prizeList" :style="{ transform: `rotate(${i * 36}deg)` }"—— 这样 rotate 是奖品项自身转，不是整个盘转；应统一用一个rotationAngle控制外层容器 - 奖品数量变化时（如后台删了一个奖），确保 reactive 数组长度实时同步，否则角度计算错位
- 权重总和为 0 或全为 0 时，加保护逻辑，防止随机算法崩溃
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
