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()
相关推荐
何双新2 小时前
Odoo AI 智能查询系统
前端·人工智能·python
秋名山大前端8 小时前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug8 小时前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn8 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户21411832636029 小时前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern4169 小时前
HTML(面试)
前端
excel9 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴9 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy9 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者9 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js