Vue数据响应式reactive

基本作用

在Vue3中,reactive是用来创建响应式对象 ,reactive接收一个普通的对象,返回一个深层响应式代理对象,所谓"深层",是指对象的嵌套属性(包括数组,对象里的对象)也会被转成响应式的.

js 复制代码
import { reactive } from 'vue'
const state = reactive({
  count: 0,
  user: {
    name: '张三',
    age: 18
  }
})

现在,state.countstate.user.name的变化,都会被Vue追踪,并自动触发视图更新

与ref的区别

  • ref适合存储基本类型 (数字,字符串,布尔值),取值时需要.value
  • reactive更适合对象/数组 ,直接点属性即可,不需要.value
    示例对比:
js 复制代码
import { ref, reactive } from 'vue'

const num = ref(0)          // 基本类型
num.value++                 // 修改时要用 .value

const obj = reactive({ a: 1 })
obj.a++                     // 直接修改即可

特点

  1. 深层响应式
    不用担心嵌套对象不生效:
js 复制代码
   state.user.age++  // 会触发响应式更新
  1. 返回的是代理对象 :
    所以不能再用===直接对比原始对象和reactive对象
js 复制代码
const raw = { a: 1 }
const state = reactive(raw)
console.log(state === raw) // false
  1. 适合复杂状态管理
    在组件中维护多个字段,深层嵌套时,用reactive更直观

常见用法

  • 在setup里定义组件状态:
vue 复制代码
  <script setup>
import { reactive } from 'vue'

const state = reactive({
  count: 0,
  todos: []
})

function increment() {
  state.count++
}
</script>
<template>
  <div>
    <p>计数: {{ state.count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
  • 配合解构(注意要用toRefs否则响应式会丢失)
js 复制代码
import { reactive, toRefs } from 'vue'
const state = reactive({ count: 0, msg: 'hi' })
const { count, msg } = toRefs(state)
// 现在 count 和 msg 都是 ref

总结

  • reactive用于对象和数组的响应式转换
  • 配合ref一起用,可以灵活管理不同类型的状态
相关推荐
文心快码BaiduComate6 分钟前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古1 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers
行者..................1 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_2 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员
golang学习记2 小时前
AI 乱写代码?不是模型不行,而是你的 VS Code 缺了 Context!MCP 才是破局关键
前端
星光不问赶路人2 小时前
Vite 中的 import.meta.glob vs 动态导入:该用哪个?
前端·vite
疯狂踩坑人2 小时前
【万字长文】让面试没有难撕的JS基础题
javascript·面试
z_y_j2299704383 小时前
服务器中使用Docker部署前端项目
服务器·前端·docker·容器
极客小俊3 小时前
【浅谈javascript禁术】 eval函数暗藏玄机?
javascript
迪丽热爱3 小时前
解决【npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。】问题
前端·npm·node.js