refWithControl

类别

Reactivity

导出大小

409 B

最近修改

2 days ago

别名

controlledRef

相关

computedWithControl

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

🌐 Fine-grained controls over ref and its reactivity.

用法

🌐 Usage

refWithControl 使用 extendRef 提供两个额外功能 get 和 set，以更好地控制何时应该跟踪/触发响应式。

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

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

const foo = refWithControl('foo')

// getting
foo.get(false)
foo.untrackedGet()
foo.peek() // an alias for `untrackedGet`

// setting
foo.set('bar', false)
foo.silentSet('bar')
foo.lay('bar') // an alias for `silentSet`

配置

🌐 Configurations

onBeforeChange()

onBeforeChange 选项用于控制是否应该接受一个新值。例如：

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 相比，它同步所需的开销更少。

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