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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。