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
相关推荐
daols886 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖8 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖8 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台9 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue