首页 > 建站教程 > 前端框架 >  vue3 unref 和.value的区别正文

vue3 unref 和.value的区别

在 Vue 3 中,unref 和 .value 的区别主要体现在处理响应式对象时的作用和场景不同:

.value 的用途

.value 是 ref 对象的属性,用于访问或修改响应式值。当通过 ref() 或 toRef() 创建响应式引用时,需要通过 .value 获取或设置实际值。例如:

const count = ref(1)
count.value = 2  // 修改响应式值


unref 的用途

unref 是一个工具函数,用于统一处理 ref 或 reactive 对象:

若传入值为 ref,则返回其 .value

若传入值为普通对象/数值,直接返回原值

例如:

const value = unref(ref(1)) // 返回 1
const obj = reactive({ count: 0 })
unref(obj) // 直接返回 { count: 0 }

主要区别

访问层级

    .value 是 ref 对象的内部属性,需通过对象直接访问

    unref 是独立函数,可处理任意对象(ref/普通值),返回原始值或 ref 的值

使用场景

    当操作已知为 ref 的对象时,直接使用 .value(如模板绑定或组件内部逻辑)

    当需要统一处理不确定是否为 ref 的对象时,使用 unref(如函数参数处理或复杂逻辑判断)