- API 路由统一: 移除 /api/h5/,统一 /api/pms/ 入口 - 二进制改名: api-server -> pms-api(与服务名一致) - nginx: 合并 /api/ + /pms/api/ 为 /api/pms/ - 新增 docs/API.md 接口文档 - 后端: CabinetDetail 增加 rssi/pow_fail/address/soc 等字段 - Redis 管道批量读取仓体实时数据(SOC/电压/电流/功率) - DB: 所有 TIMESTAMP 列改为 DATETIME(修复类型不匹配) - 用户管理: 新增创建时间/修改时间列,状态改用 Switch - 角色管理/用户管理: 操作按钮改为图标 - PC 设备详情: 基本信息补全 RSSI/ICCID/电源/地址 - PC 卡片: 通道统计改用 Lucide 图标,颜色统一 - PC 二维码: canvas 渲染,含编号文字,支持右键下载 - H5: 按 uni-app 规范修正导航(navigateTo 替代 reLaunch) - H5: 详情页加返回导航条 - H5: 扫码支持摄像头(jsQR)+ ?id= 参数 - H5: 底部 tabBar 在所有页面常显 - H5: 首页统计改为 6 项(设备/通道/空闲/充电/充满/故障) - H5: 下拉刷新 / 上拉加载 - 产品首页: 添加业务联系 - 文档: 清理过时文件,补充缺失规范章节
3.0 KiB
3.0 KiB
title, impact, impactDescription, type, tags
| title | impact | impactDescription | type | tags | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Refs in Arrays and Collections Require .value | MEDIUM | Refs inside reactive arrays, Maps, or Sets are NOT auto-unwrapped like in reactive objects | capability |
|
Refs in Arrays and Collections Require .value
Impact: MEDIUM - Unlike when a ref is a property of a reactive object, refs inside reactive arrays, Maps, and Sets are NOT automatically unwrapped. You must access them with .value, and forgetting this leads to silent bugs.
Vue only auto-unwraps refs when they are properties of reactive objects. When refs are elements in arrays or values in Maps/Sets, they remain as ref objects and require explicit .value access.
Task Checklist
- Always use
.valuewhen accessing refs stored in reactive arrays - Always use
.valuewhen accessing refs stored in reactive Maps or Sets - Consider storing plain values instead of refs in collections to avoid confusion
- Be aware of this when iterating over arrays containing refs
Incorrect:
import { ref, reactive } from 'vue'
const books = reactive([ref('Vue 3 Guide')])
const counts = reactive(new Map([['clicks', ref(0)]]))
// WRONG: Refs in arrays are NOT unwrapped
console.log(books[0]) // Ref object, not 'Vue 3 Guide'
books[0] = 'New Title' // Replaces the ref, doesn't update it!
// WRONG: Refs in Maps are NOT unwrapped
console.log(counts.get('clicks')) // Ref object, not 0
counts.get('clicks')++ // Does nothing useful
Correct:
import { ref, reactive } from 'vue'
const books = reactive([ref('Vue 3 Guide')])
const counts = reactive(new Map([['clicks', ref(0)]]))
// CORRECT: Use .value for refs in arrays
console.log(books[0].value) // 'Vue 3 Guide'
books[0].value = 'New Title' // Updates the ref's value
// CORRECT: Use .value for refs in Maps
console.log(counts.get('clicks').value) // 0
counts.get('clicks').value++ // Increments to 1
// ALTERNATIVE: Just store plain values in collections (simpler)
const books = reactive(['Vue 3 Guide', 'Vuex Handbook'])
const counts = reactive(new Map([['clicks', 0]]))
// No .value needed - but changes to individual items aren't independently reactive
console.log(books[0]) // 'Vue 3 Guide'
console.log(counts.get('clicks')) // 0
// Mutations still trigger reactivity through the reactive wrapper
books[0] = 'New Title' // Works
counts.set('clicks', counts.get('clicks') + 1) // Works
<template>
<!-- In templates, refs in arrays also need special handling -->
<div v-for="(book, index) in books" :key="index">
<!-- If book is a ref, you'd need: -->
{{ book.value }}
<!-- Or use computed to unwrap them first -->
</div>
</template>