Skip to content

refWithControl

对 ref 及其反应式性的细粒度控制。

¥Fine-grained controls over ref and its reactivity.

用法

¥Usage

refWithControl 使用 extendRef 提供两个额外函数 getset,以便更好地控制何时应跟踪/触发反应式性。

¥refWithControl uses extendRef to provide two extra functions get and set to have better control over when it should track/trigger the reactivity.

ts
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.

ts
const 
foo
=
refWithControl
('foo')
ts
// getting
foo
.
get
(false)
foo
.
untrackedGet
()
foo
.
peek
() // an alias for `untrackedGet`
ts
// setting
foo
.
set
('bar', false)
foo
.
silentSet
('bar')
foo
.
lay
('bar') // an alias for `silentSet`

配置

¥Configurations

onBeforeChange()

提供 onBeforeChange 选项来控制是否应接受新值。例如:

¥onBeforeChange option is offered to give control over if a new value should be accepted. For example:

ts
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 选项提供与 Vue 的 watch 类似的功能,但与 watch 相比,同步开销更少。

¥onChanged option offers a similar functionally as Vue's watch but being synchronized with less overhead compared to watch.

ts
const 
num
=
refWithControl
(0, {
onChanged
(
value
,
oldValue
) {
console
.
log
(
value
)
}, })