Vue 自动解包 .value

在 Vue.js（特别是 Vue3）中，"自动解包 .value"指的是当你在特定场景下使用 **Ref 类型变量时， Vue会自动访问其.value 属性值而无需手动写 `.value"。这是为了简化代码并提升开发体验。

 一、什么是 Ref？

 Ref 是 Vue3 的响应式基础类型之一：

 const count = ref(0) // count是一个 Ref<number>  

访问其值需要 .value

 console.log(count.value) // 输出 0  

 

二、自动解包的场景（无需写 .value)

1. 模板中使用 Ref

<template> 
  <!-- 自动解包 --> 
  <div>{{ count }}</div> 
</template> 

等价于手动写 .value

<div>{{ count.value }}</div> 

2. Reactive 对象中的 Ref

当 Ref 被嵌套在 Reactive 对象中时会被自动解包

const foo = ref('bar') 
const data = reactive({ foo })

console.log(data.foo) // 输出 'bar'（自动解包）

 3.Watch 直接监听 Ref

 当用 Watch 直接监听 Ref 时会自动传入解包后的

 

错误

⚠️问题：
1.直接传递的是当前值而非响应式引用
2.Vue无法建立有效的依赖追踪
3.实际上等于监听一个静态值

watch(count.value, (newValue) => { 
  console.log(newValue) // 等价于 count.value 
}）

不推荐

⚠️问题：

写法可用但有冗余

watch(
  ()=>count.value,
  (newValue) => { console.log(newValue) // 等价于 count.value
}) 


推荐

watch(count, (newValue) => { 
  console.log(newValue) // 等价于 count.value 
}) 

 

不推荐 
watch(
  () => currentFundType.value,
  () => {
    paging.value.reload()
  },
)

watch(
  () => currentDept.value,
  () => {
    paging.value.reload()
  },
)

watch(
  () => currentStage.value,
  () => {
    paging.value.reload()
  },
)


推荐

watch([currentFundType, currentDept, currentStage], () => {

  paging.value.reload()
})