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
相关推荐
小白变怪兽1 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头1 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding3 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机3 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人4 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景4 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui