Vue 3 的 ref：为什么需要它，以及如何使用它

什么是 ref？

ref 是 Vue 3 提供的一个函数，用于创建响应式引用。它的核心思想是：给任何值套上一个"盒子"，通过这个盒子来追踪值的变化。

基本用法

import { ref } from 'vue'

// 创建一个响应式引用
const count = ref(0)

// 在 JavaScript 中访问和修改
console.log(count.value) // 读取：0
count.value = 1         // 修改：1

虽然在 JS 中需要用 .value，但在模板中 Vue 会自动"拆箱"，不需要使用.value：

<template>
  <div>
    <p>{{ count }}</p>  <!-- 这里不需要 .value！ -->
    <button @click="count++">+1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

ref 能包装什么？

1. 基本数据类型

const name = ref('张三')     // 字符串
const age = ref(25)         // 数字  
const isActive = ref(false) // 布尔值

2. 对象和数组

const user = ref({ name: '张三', age: 25 })
const list = ref([1, 2, 3])

3. 甚至 DOM 元素！

<template>
  <input ref="inputRef">
</template>

<script setup>
import { ref, onMounted } from 'vue'

const inputRef = ref(null)

onMounted(() => {
  inputRef.value.focus() // 组件挂载后自动聚焦
})
</script>

为什么需要 .value？

你可能会问：为什么在 JS 中要用 .value 这么麻烦？

答案：这是追踪变化的必要手段。

const count = ref(0)

// 当执行 count.value = 1 时，Vue 能够：
// 1. 检测到值发生了变化
// 2. 触发相关的副作用（比如更新界面）
// 3. 通知所有依赖这个值的地方

如果没有 .value 这个"信号灯"，Vue 就无法知道什么时候值发生了变化。

总结

ref 是 Vue 3 响应式系统的基石之一，它通过简单的 .value 机制，让我们能够让任何类型的值变得响应式