Vue 响应式：ref 与 reactive

先记住一个直觉

学 Composition API 时，我把自己的理解简化成一句话： ref 更适合「单个值」； reactive 更适合「一组相关字段」。这不是硬性规则，但能先帮我少踩坑。

基础类型或需要整体替换的值，我更常写 ref。模板里自动解包，脚本里要记得 .value。

import { ref } from 'vue'

const count = ref(0)
const title = ref('学习札记')

count.value += 1
title.value = 'Vue 笔记'

表单、配置对象这类「字段彼此相关」的状态，用 reactive 读起来更自然。

import { reactive } from 'vue'

const form = reactive({
  name: '',
  remember: true
})

form.name = '笔记'

自己踩过的坑：对 reactive 对象做解构后，取出的字段会丢掉响应性。需要时用 toRefs，或者干脆不要解构。