【Vue3 基础加餐篇】06.Ref 解包场景

在Vue 3中，Refs 是用来跟踪单个响应式值的一种方式。当你有一个 Ref 并且你想要获取它的值时，你需要对其进行“解包”。

在Vue 3中，Ref的解包方式取决于你是在普通的JavaScript代码中还是在Vue的模板中。

1. 在普通的JavaScript代码中，你可以通过.value属性来获取Ref的值。

import { ref } from 'vue'
 
const count = ref(0)
console.log(count.value) // 输出: 0

2. 在Vue的模板中，你不需要解包Ref，因为Vue会自动处理。

<template>
  <div>{{ count }}</div>
</template>
 
<script>
import { ref } from 'vue'
 
export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

在上述模板中，Vue会自动处理count变量，使其能够在模板中正常显示其值。

如果你在setup函数中返回了一个对象，并且这个对象中包含了Ref，那么在模板中使用这个Ref时，Vue会自动处理解包。

<template>
  <div>{{ count }}</div>
</template>
 
<script>
import { ref } from 'vue'
 
export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

在上述例子中，count在模板中被直接使用，Vue会自动处理解包，所以你不需要写成{{ count.value }}。