vue3中的reactive和ref

三三木木七2024-05-07 12:57

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

reactive 和 ref 是 Vue 3 Composition API 中用于创建响应式数据的两种主要方式，它们的作用如下：

响应式数据管理：
- reactive: reactive 函数用于创建一个包含响应式数据的响应式对象。这意味着当对象的属性发生变化时，相关的视图会自动更新。
- ref: ref 函数用于创建一个包装后的响应式值。当该值发生变化时，相关的视图也会自动更新。
数据变化的跟踪和响应：
- reactive: 创建的响应式对象可以包含多个属性，当任何一个属性发生变化时，相关的视图都会进行更新。
- ref: 创建的响应式值是单个值的引用，当值发生变化时，相关的视图会进行更新。
数据访问与修改：
- reactive: 创建的响应式对象可以直接访问和修改对象的属性，就像普通的 JavaScript 对象一样。
- ref: 创建的响应式值通过 .value 属性来访问和修改其内部值。
用法区别：
- 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