Vue.js toRefs()用法及代碼示例

將響應式對象轉換為普通對象，其中結果對象的每個屬性都是指向原始對象相應屬性的 ref。每個單獨的 ref 都是使用 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 隻會為調用時在源對象上可枚舉的屬性生成引用。要為可能尚不存在的屬性創建 ref，請改用 toRef 。

相關用法

注：本文由純淨天空篩選整理自vuejs.org大神的英文原創作品 toRefs()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。