Vue 模板中 ref 的自动解包机制及常见误区

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++ // 脚本中需要 .value
}
</script>
<template>
  <!-- 模板中自动解包，无需 .value -->
  <button>{{ count }}</button>
</template>

<button>{{ count }}</button>

h('button', null, count.value)

<script setup>
const obj = ref({ count: 0 })
</script>
<template>
  <!-- 错误：这样不会响应式更新 -->
  <div>{{ obj.count }}</div>
  <!--  正确：需要访问 value -->
  <div>{{ obj.value.count }}</div>
</template>

const obj = reactive({ count: 0 })
// 模板中可以直接访问 obj.count

<script setup>
const name = ref('Vue')
const age = ref(3)
</script>
<template>
  <p>框架: {{ name }}</p>
  <p>版本: {{ age }}</p>
</template>

<script setup>
const items = ref([
  { id: 1, title: 'Vue 3' },
  { id: 2, title: 'React' },
])
</script>
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.title }}
    </li>
  </ul>
</template>

<script setup>
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>
<template>
  <p>原始值: {{ count }}</p>
  <p>翻倍值: {{ doubled }}</p>
</template>

<script setup>
function handleClick() {
  const localRef = ref(0)
  // 模板中无法访问 localRef
}
const topRef = ref(0)
// 模板中可以访问
</script>

<script setup>
const data = ref()
</script>
<template>
  <!-- 可能报错：Cannot read property of undefined -->
  <p>{{ data.value }}</p>
</template>

<template>
  <p>{{ data?.value || '加载中...' }}</p>
</template>

// 错误
const a = ref(1)
const b = a + 1  // a 不会被解包
// 正确
const b = a.value + 1

const user = ref({
  profile: {
    name: ref('Vue')
  }
})
// 模板中 user.profile.name 不会自动解包
// 需要 user.value.profile.name.value