- 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.4 KiB
3.4 KiB
category, alias, related
| category | alias | related |
|---|---|---|
| Reactivity | controlledRef | computedWithControl |
refWithControl
Fine-grained controls over ref and its reactivity.
Usage
refWithControl uses extendRef to provide two extra functions get and set to have better control over when it should track/trigger the reactivity.
import { refWithControl } from '@vueuse/core'
const num = refWithControl(0)
const doubled = computed(() => num.value * 2)
// just like normal ref
num.value = 42
console.log(num.value) // 42
console.log(doubled.value) // 84
// set value without triggering the reactivity
num.set(30, false)
console.log(num.value) // 30
console.log(doubled.value) // 84 (doesn't update)
// get value without tracking the reactivity
watchEffect(() => {
console.log(num.peek())
}) // 30
num.value = 50 // watch effect wouldn't be triggered since it collected nothing.
console.log(doubled.value) // 100 (updated again since it's a reactive set)
peek, lay, untrackedGet, silentSet
We also provide some shorthands for doing the get/set without track/triggering the reactivity system. The following lines are equivalent.
import { refWithControl } from '@vueuse/core'
// ---cut---
const foo = refWithControl('foo')
import { refWithControl } from '@vueuse/core'
const foo = refWithControl('foo')
// ---cut---
// getting
foo.get(false)
foo.untrackedGet()
foo.peek() // an alias for `untrackedGet`
import { refWithControl } from '@vueuse/core'
const foo = refWithControl('foo')
// ---cut---
// setting
foo.set('bar', false)
foo.silentSet('bar')
foo.lay('bar') // an alias for `silentSet`
Configurations
onBeforeChange()
onBeforeChange option is offered to give control over if a new value should be accepted. For example:
import { refWithControl } from '@vueuse/core'
// ---cut---
const num = refWithControl(0, {
onBeforeChange(value, oldValue) {
// disallow changes larger then ±5 in one operation
if (Math.abs(value - oldValue) > 5)
return false // returning `false` to dismiss the change
},
})
num.value += 1
console.log(num.value) // 1
num.value += 6
console.log(num.value) // 1 (change been dismissed)
onChanged()
onChanged option offers a similar functionally as Vue's watch but being synchronized with less overhead compared to watch.
import { refWithControl } from '@vueuse/core'
// ---cut---
const num = refWithControl(0, {
onChanged(value, oldValue) {
console.log(value)
},
})
Type Declarations
export interface ControlledRefOptions<T> {
/**
* Callback function before the ref changing.
*
* Returning `false` to dismiss the change.
*/
onBeforeChange?: (value: T, oldValue: T) => void | boolean
/**
* Callback function after the ref changed
*
* This happens synchronously, with less overhead compare to `watch`
*/
onChanged?: (value: T, oldValue: T) => void
}
/**
* Fine-grained controls over ref and its reactivity.
*
* @__NO_SIDE_EFFECTS__
*/
export declare function refWithControl<T>(
initial: T,
options?: ControlledRefOptions<T>,
): ShallowUnwrapRef<{
get: (tracking?: boolean) => T
set: (value: T, triggering?: boolean) => void
untrackedGet: () => T
silentSet: (v: T) => void
peek: () => T
lay: (v: T) => void
}> &
Ref<T, T>
/** @deprecated use `refWithControl` instead */
export declare const controlledRef: typeof refWithControl