響應性API: 工具

isRef()

檢查一個值是否為ref物件。

型別

function isRef<T>(r: Ref<T> | unknown): r is Ref<T>

注意返回型別是一個型別守衛，這意味著 isRef 可以用作型別守衛

let foo: unknown
if (isRef(foo)) {
  // foo's type is narrowed to Ref<unknown>
  foo.value
}

unref()

如果引數是ref，則返回內部值，否則返回引數本身。這是一個簡寫函式，相當於 val = isRef(val) ? val.value : val。

型別
ts
```
function unref<T>(ref: T | Ref<T>): T
```

示例

function useFoo(x: number | Ref<number>) {
  const unwrapped = unref(x)
  // unwrapped is guaranteed to be number now
}

toRef()

可以用於將值 / refs / getters 規範化為refs（3.3+）。

也可以用於為源響應式物件的屬性建立一個ref。建立的ref與其源屬性同步：修改源屬性將更新ref，反之亦然。

型別

// normalization signature (3.3+)
function toRef<T>(
  value: T
): T extends () => infer R
  ? Readonly<Ref<R>>
  : T extends Ref
  ? T
  : Ref<UnwrapRef<T>>

// object property signature
function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K,
  defaultValue?: T[K]
): ToRef<T[K]>

type ToRef<T> = T extends Ref ? T : Ref<T>

示例

規範化簽名（3.3+）

// returns existing refs as-is
toRef(existingRef)

// creates a readonly ref that calls the getter on .value access
toRef(() => props.foo)

// creates normal refs from non-function values
// equivalent to ref(1)
toRef(1)

物件屬性簽名

const state = reactive({
  foo: 1,
  bar: 2
})

// a two-way ref that syncs with the original property
const fooRef = toRef(state, 'foo')

// mutating the ref updates the original
fooRef.value++
console.log(state.foo) // 2

// mutating the original also updates the ref
state.foo++
console.log(fooRef.value) // 3

注意這與

const fooRef = ref(state.foo)

上面的引用沒有與 state.foo 同步，因為 ref() 接收的是純數字值。

toRef() 當你想將屬性的引用傳遞給組合函式時很有用。

vue

<script setup>
import { toRef } from 'vue'

const props = defineProps(/* ... */)

// convert `props.foo` into a ref, then pass into
// a composable
useSomeFeature(toRef(props, 'foo'))

// getter syntax - recommended in 3.3+
useSomeFeature(toRef(() => props.foo))
</script>

當與元件屬性一起使用 toRef 時，仍然適用關於修改屬性的限制。嘗試為引用分配新值相當於嘗試直接修改屬性，並且是不允許的。在這種情況下，你可能需要考慮使用帶有 get 和 set 的 computed。有關更多資訊，請參閱使用 v-model 與元件的指南。

當使用物件屬性簽名時，即使源屬性當前不存在，toRef() 也會返回一個可用的引用。這使得可以處理可選屬性，這些屬性不會被 toRefs 捕獲。

toValue()

僅支援在 3.3+ 中。

將值、引用和獲取器標準化為值。這與 unref() 類似，但還標準化了獲取器。如果引數是獲取器，它將被呼叫，並返回其返回值。

這可以在組合式中使用，以標準化可以是值、引用或獲取器的引數。

型別

function toValue<T>(source: T | Ref<T> | (() => T)): T

示例

toValue(1) //       --> 1
toValue(ref(1)) //  --> 1
toValue(() => 1) // --> 1

在組合式中標準化引數

import type { MaybeRefOrGetter } from 'vue'

function useFeature(id: MaybeRefOrGetter<number>) {
  watch(() => toValue(id), id => {
    // react to id changes
  })
}

// this composable supports any of the following:
useFeature(1)
useFeature(ref(1))
useFeature(() => 1)

toRefs()

將響應式物件轉換為普通物件，其中結果物件的每個屬性都是指向原始物件相應屬性的引用。每個單獨的引用都是使用 toRef() 建立的。

型別

function toRefs<T extends object>(
  object: T
): {
  [K in keyof T]: ToRef<T[K]>
}

type ToRef = T extends Ref ? T : Ref<T>

示例

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
Type of stateAsRefs: {
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// The ref and the original property is "linked"
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

toRefs 當從組合函式返回響應式物件時很有用，這樣消耗元件就可以解構/展開返回的物件，而不會丟失響應性。

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // ...logic operating on state

  // convert to refs when returning
  return toRefs(state)
}

// can destructure without losing reactivity
const { foo, bar } = useFeatureX()

toRefs 將只為在呼叫時在源物件上是可列舉的屬性生成引用。要為可能還不存在的屬性建立引用，請使用 toRef。

isProxy()

檢查一個物件是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 建立的代理。

型別
ts
```
function isProxy(value: any): boolean
```

isReactive()

檢查一個物件是否是由 reactive() 或 shallowReactive() 建立的代理。

型別

function isReactive(value: unknown): boolean

isReadonly()

檢查傳入的值是否是隻讀物件。只讀物件的屬性可以更改，但無法透過傳入的物件直接賦值。

readonly() 和 shallowReadonly() 建立的代理都被認為是隻讀的，就像沒有 set 函式的 computed 引用一樣。

型別

function isReadonly(value: unknown): boolean

在 GitHub 上編輯此頁面

響應性API: 工具 ​

isRef() ​

unref() ​

toRef() ​

toValue() ​

toRefs() ​

isProxy() ​

isReactive() ​

isReadonly() ​