【2024】前端学习笔记19-ref和reactive使用

1.ref

ref是 Vue 3 中用来创建响应式引用的一个函数，通常用于基本数据类型（如字符串、数字、布尔值等）或对象/数组的单一值。

ref特点：

• ref 可以用来创建单个响应式对象
• 对于 ref 包裹的值，你需要通过 .value 来访问和修改它的值
• 在模板中，Vue 会自动解包 ref 对象，所以可以直接使用 count 而不需要 .value

示例：

// 使用ref创建一个名为name的响应式变量，初始值为yyang
const name = ref('yyang')
// 将这个变量的情况输出在控制台 上
console.log(name)

输出：

其中的value就是变量name的值，如果要想修改值得内容，直接修改是不行得，需要使用以下得方法：

name.value = 'xxxxx'

输出：

2.reactive

reactive 用于创建一个响应式对象。它是针对复杂对象（如对象、数组、Map、Set 等）设计的。reactive 会自动使整个对象变成响应式。

reactive特点 ：

• reactive 适用于对象或数组（包括嵌套对象和数组），可以让整个对象变为响应式
• 不需要通过 .value 来访问值，直接使用对象的属性进行操作
• reactive 返回的是一个代理对象，所有对这个对象的操作都会自动追踪和反应

示例：

// 使用 reactive 创建了一个包含用户信息（姓名和年龄）的响应式对象 state
const state = reactive({
  user: {
    name: 'yyang',
    age: 18
  }
})
// 通过 console.log 打印出 state.user，即显示 user 对象的内容
console.log("state的信息：", state.user)

输出：

如果需要更新属性，比如更新name为bobo，只需要这样：

state.user.name = 'bobo';

3.总结

何时使用 ref 或 reactive：

ref 适用于 基本类型 和 需要包装为响应式的单一对象，例如：

• 用来存储数字、字符串、布尔值等。
• 如果只是管理一个简单的状态，比如计数器。

reactive 适用于 复杂对象 或 多个相关的属性，例如：

• 用来存储一个包含多个属性的对象，或者是包含多个元素的数组。
• 当需要修改和操作复杂数据结构时，reactive 更加方便。

总结：

• ref 更适合简单的值和对基本数据类型的响应式处理（需要 .value 来访问）。
• reactive 更适合处理对象和数组等复杂数据结构，可以直接操作对象的属性。