Vue3 作为目前前端主流的框架之一，其 Composition API 带来了更灵活、更高效的代码组织方式，而变量声明是 Composition API 最基础也最核心的部分。很多开发者从 Vue2 迁移到 Vue3 时，容易在 ref、reactive、toRefs 等 API 的使用上踩坑（比如忘记 .value、混淆响应式类型）。本文将从基础到进阶，全面讲解 Vue3 变量声明的正确姿势、使用场景和最佳实践。
一、Vue3 变量声明的核心：响应式原理
Vue3 抛弃了 Vue2 的 Object.defineProperty，改用 Proxy 代理 实现响应式，这也是变量声明 API 设计的底层逻辑：
- 响应式变量：数据变化时，视图自动更新；
- 非响应式变量：数据变化，视图无感知。
Vue3 提供了两类核心 API 用于声明响应式变量：ref 和 reactive，这是我们日常开发中最常用的两个工具。
二、基础用法：ref 和 reactive
1. ref：声明简单类型响应式变量
ref 是 Vue3 中最基础的响应式 API，专门用于声明简单类型（数字、字符串、布尔值）或单个复杂类型（对象 / 数组）的响应式变量。
基本语法
<script setup>
import { ref } from \’vue\’
// 声明简单类型
const count = ref(0) // 数字
const message = ref(\’Hello Vue3\’) // 字符串
const isShow = ref(true) // 布尔值
// 声明复杂类型（也可以，但推荐用 reactive）
const user = ref({ name: \’张三\’, age: 20 })
// 修改值：必须通过 .value 访问（脚本内）
const handleClick = () => {
count.value += 1
message.value = \’响应式更新\’
user.value.age = 21 // 复杂类型内部属性可直接改
}
</script>
<template>
<!– 模板中无需 .value，Vue 自动解包 –>
<div>{
{ count }}</div>
<div>{
{ message }}</div>
<div>{
{ user.name }}</div>
<button @click=\”handleClick\”>点击修改</button>
</template>
核心特点
- 脚本内访问 / 修改必须加 .value，模板中自动解包（无需 .value）；
- 底层通过「包装对象」实现响应式（
