toRefs()

将响应式对象转换为普通对象，其中结果对象的每个属性都是指向原始对象相应属性的 ref。每个单独的 ref 都是使用创建的toRef()。

类型

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

type ToRef = T extends Ref ? T : Ref

例子

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

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

// 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()改用。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com