toRef

将 value/ref/getter 标准化为 ref 或 computed。

¥Normalize value/ref/getter to ref or computed.

用法

¥Usage

import { toRef } from '@vueuse/core'

const foo = ref('hi')

const a = toRef(0) // Ref<number>
const b = toRef(foo) // Ref<string>
const c = toRef(() => 'hi') // ComputedRef<string>

与 Vue 的 toRef 的区别

¥Differences from Vue's toRef

VueUse 的 toRef 与 Vue vue 包中的 toRef 不同。

¥VueUse's toRef is not the same as Vue’s toRef from the vue package.

VueUse toRef

• 接受值、ref 或 getter

  ¥Accepts value, ref, or getter

• 返回值：

  ¥Returns:

  • 原始值的引用

    ¥a ref for primitive values

  • 现有引用的引用

    ¥a ref for existing refs

  • 用于 getter 函数的计算属性

    ¥a computed for getter functions

• 不接受 object + key

  ¥Does not accept object + key

• getter 始终生成只读的计算值

  ¥Getters always produce readonly computed values

Vue toRef

• 仅接受：

  ¥Accepts only:

  • 响应式对象 + 属性键，或

    ¥a reactive object + property key, or

  • 一个已存在的 ref

    ¥an existing ref

• 生成一个链接到底层响应式对象的可写 ref

  ¥Produces a writable ref linked to the underlying reactive object

• 不接受原始值

  ¥Does not accept primitive values

• 不接受 getter 函数

  ¥Does not accept getter functions

总结

¥Summary

行为	VueUse toRef	Vue toRef
接受原始值	✔️	❌
接受 getter	✔️ （计算型）	❌
接受已存在的 ref	✔️	✔️
接受对象 + 键	❌	✔️
可写	✔️ （getter 除外）	✔️
用途	规范化为 ref/计算型	绑定到响应式对象