vue中reactive()和ref()的用法

在 Vue 3 的 Composition API 里,reactive()ref() 都是用来把「普通数据」变成「响应式数据 」的函数。

一句话区别:

  • reactive() 只能包裹对象/数组
  • ref() 可以包裹任何类型 ,但在 模板 里读取时,不需要 .value

下面按「概念 → API → 使用 → 常见注意点」展开。


1. 为什么需要它们

Vue 2 里只有 data() { return {...} } 这一种声明响应式数据的方式。

Vue 3 的 Composition API 把「声明响应式」拆成了两个底层函数:

函数 适合场景 返回值
reactive() 对象、数组 Proxy
ref() 基本类型、对象、数组 RefImpl 对象

2. reactive() 用法

ts 复制代码
import { reactive } from 'vue'

const state = reactive({
  count: 0,
  list: [1, 2, 3]
})

// 使用
state.count++         // ✅ 触发视图更新
state.list.push(4)    // ✅ 触发视图更新
  • 模板里直接写:
vue 复制代码
<template>
  <p>{{ state.count }}</p>
  <button @click="state.count++">+</button>
</template>

⚠️ 注意

  • 不能对 state 重新赋值(会失去响应式)
ts 复制代码
state = { count: 10 } // ❌ 错误
  • 解构会丢失响应式
ts 复制代码
const { count } = state // ❌ count 不是响应式
// 正确:用 toRefs(state) 解构

3. ref() 用法

ts 复制代码
import { ref } from 'vue'

const count = ref(0)
const name  = ref('Vue')
const obj   = ref({ a: 1 }) // 也可以包对象
  • 脚本里 取值 / 赋值 必须加 .value
ts 复制代码
count.value++            // ✅
obj.value.a = 2          // ✅
  • 模板里 会自动解包,不写 .value
vue 复制代码
<template>
  <p>{{ count }}</p>   <!-- 模板里直接写 count -->
  <button @click="count++">+</button>
</template>

⚠️ 注意

  • 重新赋值不会破坏响应式
ts 复制代码
count.value = 100   // ✅ 仍是响应式
  • 对对象/数组用 ref() 时,深层属性依旧是响应式,因为内部会递归 reactive()

4. 什么时候用哪个?

场景 推荐
需要一组关联属性(表单、状态对象) reactive()
只有一个基本类型(数字、布尔、字符串) ref()
需要解构重新赋值(替换整个对象) ref()
需要深层响应式结构固定 reactive()

5. 组合使用示例

ts 复制代码
<script setup>
import { reactive, ref } from 'vue'

// 一整个对象
const user = reactive({
  name: 'Tom',
  age: 18
})

// 单个值
const loading = ref(false)

// 方法
function addAge() {
  user.age++
  loading.value = true
}
</script>

<template>
  <div v-if="!loading">
    {{ user.name }} - {{ user.age }}岁
    <button @click="addAge">长大一岁</button>
  </div>
  <p v-else>加载中...</p>
</template>

6. 速记口诀

  • 对象用 reactive,基本类型用 ref
  • 模板里 ref.value,脚本里千万别省。
  • 解构对象用 toRefs(),重新赋值用 ref()
相关推荐
用户1409508112806 分钟前
如何在JavaScript中更好地使用闭包?
javascript
flashlight_hi7 分钟前
LeetCode 分类刷题:16. 最接近的三数之和
javascript·数据结构·算法·leetcode
汪子熙14 分钟前
如何使用 Node.js 代码下载 Github issue 到本地
javascript·后端
拾光拾趣录15 分钟前
🔥99%人只知WebP小,第3个特性却翻车?💥
前端·面试
xianxin_18 分钟前
HTML 5 本地数据库
前端
BUG收容所所长21 分钟前
如何用 Node.js 构建一个智能文章生成器?从零开始的技术实践之旅
前端·node.js·设计
breeze_whisper21 分钟前
使用AI聊天的时候,字儿是咋一个一个蹦出来的?
前端
前端Hardy22 分钟前
HTML&CSS&JS:有趣的练手小案例-开关灯效果
前端·javascript·css
Sawtone24 分钟前
[前端] 面试官:Babel = 比巴卜,想吃了是吧?👿一文速通 Babel 基础知识点,全文干货,干净不废话👋
前端·面试
xianxin_25 分钟前
HTML5 语义元素
前端