vue3中的reactive和ref

🌏总结:reactive 适用于创建复杂的响应式对象,而 ref 则适用于创建简单的响应式值。


reactiveref 是 Vue 3 Composition API 中用于创建响应式数据的两种主要方式,它们的作用如下:

  1. 响应式数据管理

    • reactive: reactive 函数用于创建一个包含响应式数据的响应式对象。这意味着当对象的属性发生变化时,相关的视图会自动更新。
    • ref: ref 函数用于创建一个包装后的响应式值。当该值发生变化时,相关的视图也会自动更新。
  2. 数据变化的跟踪和响应

    • reactive: 创建的响应式对象可以包含多个属性,当任何一个属性发生变化时,相关的视图都会进行更新。
    • ref: 创建的响应式值是单个值的引用,当值发生变化时,相关的视图会进行更新。
  3. 数据访问与修改

    • reactive: 创建的响应式对象可以直接访问和修改对象的属性,就像普通的 JavaScript 对象一样。
    • ref: 创建的响应式值通过 .value 属性来访问和修改其内部值。
  4. 用法区别

    • reactive: 适用于创建复杂的响应式对象,例如包含多个属性的对象、嵌套对象等。
    • ref: 适用于创建简单的响应式值,例如单个变量、计数器、DOM 元素的引用等。

举个例子:

reactive:

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

const user = reactive({
  username: 'John',
  age: 30
})

// 修改属性
user.username = 'Jane'
user.age = 35

console.log(user.username) // 输出: Jane
console.log(user.age)      // 输出: 35

ref:

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

const age = ref(30)

// 修改值
age.value = 35

console.log(age.value) // 输出: 35
相关推荐
FlowGram2 分钟前
低代码设计态变量挑战与设计 — 前端变量引擎介绍
前端·低代码
大西瓜瓜瓜8 分钟前
PS2020,将所有图片不剪切,调整为800×800像素的文档尺寸。
前端
sjin10 分钟前
React源码 - 大名鼎鼎的Fiber
前端
子兮曰11 分钟前
🚀从单体到Monorepo:四川省xxx协会官网架构重生记
前端·next.js·turbopack
bosscheng12 分钟前
0到1理解web音视频从采集到传输到播放系列之《Jessibuca系列篇音视频解封装》
javascript·音视频开发
白水清风15 分钟前
CI/CD学习记录(基于GitLab)
前端·自动化运维·前端工程化
齐杰拉16 分钟前
源码精读:拆解 ChatGPT 打字机效果背后的数据流水线
前端·chatgpt
文心快码BaiduComate26 分钟前
“一人即团队”——一句话驱动智能体团队
前端·后端·程序员
我是ed26 分钟前
# vue3 实现前端生成水印效果
前端
恶猫30 分钟前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度