前言

以下文章是我个人学习的输出方式，目的是为了夯实自己的技术基础。

介绍

在 Vue 3 中，ref 和 reactive 是两个常用的 API，用于定义响应式的数据。它们在创建和使用上有一些不同的地方，以下是它们的用法和区别：

ref()

ref 用于创建一个响应式的基本数据或对象。它返回一个包含 .value 属性的对象，通过这个属性可以访问和修改其值。

使用示例：

import { ref } from 'vue'

// 创建了一个基本类型的响应式数据
const count = ref(0)

function increment() {
  // 在 ts 中需要 .value
  count.value++
}

// 创建了一个对象类型的响应式数据
const state = ref({ 
  count: 0 
})

function add() {
  // 在 ts 中需要 .value
  state.value.count++
}

特点：

多类型：即可以适用于需要响应式的基本类型数据（如字符串、数字、布尔值），也可以是对象类型；
访问属性：需要通过 .value 来访问和修改值；
自动解包：在模板中可以直接使用，无需 .value；

reactive()

reactive 用于创建一个响应式的对象。它会将整个对象转换为响应式的，当对象中的属性发生变化时，Vue 会自动跟踪这些变化。

使用示例：

import { reactive } from 'vue'

// 创建了一个对象类型的响应式数据
const state = reactive({
  count: 0,
  message: 'Hello Vue 3'
})

function increment() {
  state.count++
}

特点：

复杂数据结构：适用于需要响应式的复杂数据结构（如对象、数组）；
访问方式：可以直接访问和修改对象的属性；
嵌套对象：嵌套的对象属性也是响应式的；

区别

数据类型：
ref 适用于基本类型数据或对象；
reactive 适用于对象；

访问方式：
ref 需要通过 .value 访问和修改数据；
reactive 直接通过对象属性访问和修改数据；

使用场景：
ref 更适合用于简单的数据或用于接收接口返回的数据并赋值；
reactive 更适合用于表单数据；

注意

用 ref 定义的数据赋值时，可直接通过 xxx.value = data 直接赋值；
而使用 reactive 定义的数据赋值时，不能直接使用 =，需要使用 Object.assign(xxx, data)，否则会失去响应式。

其他 API

toRefs() 与 toRef()

作用：将一个响应式对象中的每一个属性，转换为 ref 对象；
备注：toRefs 与 toRef 功能一致，但 toRefs 可以批量转换；
语法如下：

import { ref, reactive, toRefs, toRef } from 'vue'

// 创建了一个对象类型的响应式数据
const person = reactive({
  name: '张三', 
  age: 18, 
  gender: '男'
})

// 通过 toRefs 将 person 对象中的 n 个属性批量取出，且依然保持响应式的能力
const { name, age } =  toRefs(person)

// 通过 toRef 将 person 对象中的 gender 属性取出，且依然保持响应式的能力
const gender = toRef(person, 'gender')