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
相关推荐
uncleTom6666 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥9 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF20 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man22 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬23 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C27 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
盏茶作酒2939 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐1 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app