Vue 响应式入门：把 ref、reactive 和 computed 用在合适的位置

写 Vue 页面时，最常见的工作是把状态变成界面：输入框里有什么、列表筛选后剩下多少条、按钮是否可以点击。先区分“需要保存的状态”和“能够计算出来的结果”，响应式代码就会清楚很多。

用 ref 保存一个可以替换的值

ref() 可以接收数字、字符串，也可以接收对象。在 JavaScript 中，通过 .value 读取和修改；作为模板中的顶层绑定使用时，Vue 会自动解包。把下面的内容放进 Vue 3 项目的 src/App.vue，就能运行：

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

const count = ref(0)
const doubled = computed(() => count.value * 2)

function reset() {
  count.value = 0
}
</script>

<template>
  <main>
    <p>当前：{{ count }}，两倍：{{ doubled }}</p>
    <button type="button" @click="count++">加一</button>
    <button type="button" @click="reset">重置</button>
  </main>
</template>

<script setup> 中声明的顶层变量和函数可以直接用于模板，不需要手动返回。注意，这不意味着任意嵌套位置都会自动解包；在脚本里访问 ref 时，继续明确写 .value，会更容易判断代码的含义。

用 reactive 组织相关字段

reactive() 返回对象的响应式代理，适合把一个表单的字段组织在一起。它不能直接接收字符串等原始值。读取和修改代理对象的属性时不需要 .value：

import { reactive, toRefs } from 'vue'

const form = reactive({ keyword: '', onlyPublished: true })
form.keyword = 'Vue'

// 保留与 form.keyword 的响应式联系
const { keyword } = toRefs(form)
keyword.value = '组合式函数'

如果直接写 const { keyword } = form，这里拿到的是当时的字符串，后续修改 form.keyword 不会更新这个局部变量。需要解构并保留关联时，可以使用 toRefs()；只取一个字段可以用 toRef()。

另外，尽量保持这个代理对象的引用稳定。更新表单可以修改已有字段；如果业务需要整体替换对象，ref({ ... }) 往往更直接。两种 API 都有合适的位置，不必为了统一写法强行只用一种。

用 computed 描述结果，不重复保存状态

筛选列表、总价和是否允许提交，通常可以从已有状态算出来。让 computed() 负责这些派生结果，可以避免多个状态之间不同步：

import { computed, ref } from 'vue'

const keyword = ref('')
const articles = ref([
  { id: 1, title: 'Vue 响应式入门' },
  { id: 2, title: 'Vite 环境变量' },
])
const visibleArticles = computed(() => {
  const query = keyword.value.trim().toLowerCase()
  return articles.value.filter(article =>
    article.title.toLowerCase().includes(query)
  )
})

计算属性会追踪读取到的响应式依赖，并缓存计算结果。依赖没有变化时，多次读取会复用缓存；它不是定时执行的函数。像 Date.now() 这样的普通调用本身不会成为响应式依赖。

保持 getter 没有副作用：不要在里面发请求、修改其他状态或操作 DOM。需要响应状态变化执行副作用时，再考虑 watch()；只是显示一个计算结果时，优先使用 computed()。

用一个问题检查状态设计

新增变量前先问自己：它是独立输入，还是已有输入的结果？前者可以用 ref 或 reactive，后者通常交给 computed。再手动试一次修改、重置和空输入，确认所有显示都能一致更新。

继续阅读：Vue 响应式基础与计算属性。