1️⃣ ref

功能

ref 用来创建一个 响应式的数据引用。

• 当它的值改变时，Vue 会 自动更新依赖这个值的模板或计算属性。
• ref 返回的是一个对象，值在 .value 属性里。

基本用法

import { ref } from 'vue'

const count = ref(0)  // 初始化为 0

console.log(count.value) // 访问值

count.value++           // 修改值，模板会自动更新

模板使用

在 <template> 中 Vue 会自动解包 ref，不需要 .value：

<template>
  <p>{{ count }}</p> <!-- 自动读取 count.value -->
  <button @click="count++">增加</button>
</template>

常见场景

• 存储简单的原始值（number, string, boolean）
• 存储对象或数组也可以，但要注意 Vue 3 会用 Proxy 对对象和数组做响应式处理：

const user = ref({ name: 'Alice', age: 30 })
user.value.name = 'Bob' // 响应式修改

2️⃣ computed

功能

computed 用来定义 基于其他响应式数据计算出来的值。

• 会 缓存 计算结果，只有依赖发生变化才重新计算。
• 默认是 只读的，也可以写成可写 computed。

基本用法（只读）

import { ref, computed } from 'vue'

const count = ref(1)
const double = computed(() => count.value * 2)

console.log(double.value) // 2

count.value = 3
console.log(double.value) // 6

可写 computed

const count = ref(1)
const double = computed({
  get: () => count.value * 2,
  set: (val) => count.value = val / 2
})

double.value = 10
console.log(count.value) // 5

模板使用

<template>
  <p>{{ double }}</p> <!-- 自动解包 double.value -->
  <button @click="count++">增加</button>
</template>

常见场景

• 基于一个或多个 ref 或 reactive 的计算值
• 表单验证结果、过滤列表、派生状态等
• 想缓存计算结果，避免重复计算

3️⃣ 对比 ref 和 computed

注意点

1. 在 <script setup> 中，模板会自动解包 ref 和 computed，不需要 .value。
2. 如果你需要在 JS 里修改 computed，必须：
3. 用可写 computed，或者
4. 直接操作源数据（ref / reactive / store）