Vue中prop.value、unref(prop)、toValue(prop)的区别与适用场景

1. prop.value #

• 这是访问Ref类型响应式值的直接方式：Ref是Vue封装的响应式对象，内部通过value属性存储原始值，必须访问该属性才能拿到实际数据。
• 局限性：仅适用于Ref类型。如果传入普通变量、Reactive对象或函数，直接调用.value会抛出「Cannot read properties of undefined」错误。
• 适用场景：你明确知道目标变量是Ref类型时使用，比如自己声明的const name = ref('Alice')，直接用name.value最直观高效。

2. unref(prop) #

• Vue提供的工具函数，核心逻辑是：如果输入是Ref，返回prop.value；否则直接返回输入值本身（等价于isRef(prop) ? prop.value : prop）。
• 额外说明：对于Reactive对象，unref会直接返回该对象，因为Reactive不需要通过.value访问。
• 适用场景：不确定输入是Ref还是普通值的场景，比如封装工具函数时，参数可能是响应式Ref或普通变量，用unref可以统一处理，避免额外的类型判断。

3. toValue(prop) #

• Vue 3.3+新增的增强版工具函数，在unref的基础上支持处理getter函数：
  • 输入是Ref：返回prop.value；
  • 输入是函数：执行函数并返回其结果；
  • 其他情况：直接返回输入值。
• 等价逻辑：isRef(prop) ? prop.value : typeof prop === 'function' ? prop() : prop。
• 适用场景：需要支持多种输入类型的场景，比如封装组件或通用工具时，允许用户灵活传入Ref、普通值或动态计算的getter函数。

核心对比表 #

示例代码 #

<script setup>
import { ref, reactive, unref, toValue } from 'vue'

const refVal = ref(10)
const normalVal = 20
const reactiveObj = reactive({ num: 30 })
const getter = () => 40

// 处理Ref
console.log(refVal.value) // 10
console.log(unref(refVal)) // 10
console.log(toValue(refVal)) // 10

// 处理普通值
// console.log(normalVal.value) // 报错
console.log(unref(normalVal)) // 20
console.log(toValue(normalVal)) // 20

// 处理Reactive对象
// console.log(reactiveObj.value) // 报错
console.log(unref(reactiveObj)) // { num: 30 }
console.log(toValue(reactiveObj)) // { num: 30 }

// 处理Getter函数
// console.log(getter.value) // 报错
console.log(unref(getter)) // [Function: getter]
console.log(toValue(getter)) // 40
</script>

内容的提问来源于stack exchange，提问作者Kindzoku