响应式 API

在 Vue3 的组合式 API 中，响应式是核心特性之一。Vue3 提供了多种响应式 API 来处理不同场景下的数据响应式需求。

ref

ref 是最基础的响应式 API，用于创建一个响应式的引用类型数据。

基本用法

import { ref } from 'vue'

const count = ref(0)

// 访问值
console.log(count.value) // 0

// 修改值
count.value++
console.log(count.value) // 1

特点

• 可以用于任何类型的数据，包括基本类型和对象
• 在模板中使用时，会自动解包，不需要 .value
• 在 JavaScript 中使用时，需要使用 .value 访问和修改

reactive

reactive 用于创建一个响应式的对象。

基本用法

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello'
})

// 访问值
console.log(state.count) // 0

// 修改值
state.count++
console.log(state.count) // 1

特点

• 只能用于对象类型数据
• 直接访问和修改属性，不需要 .value
• 会递归地将对象的所有属性变为响应式

toRef

toRef 用于从响应式对象中创建一个响应式的引用，保持与原对象的连接。

基本用法

import { reactive, toRef } from 'vue'

const state = reactive({
  count: 0
})

const countRef = toRef(state, 'count')

// 修改引用会影响原对象
countRef.value++
console.log(state.count) // 1

// 修改原对象会影响引用
state.count++
console.log(countRef.value) // 2

toRefs

toRefs 用于将响应式对象的所有属性转换为响应式引用。

基本用法

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello'
})

const refs = toRefs(state)

// 解构使用
const { count, message } = refs

console.log(count.value) // 0
console.log(message.value) // Hello

响应式 API 的使用场景

• ref：适用于基本类型数据，或需要在不同组件间传递的单个数据
• reactive：适用于复杂的对象数据，如组件的状态管理
• toRef：适用于需要将对象的某个属性单独传递的场景
• toRefs：适用于需要解构响应式对象的场景，保持解构后的数据仍然是响应式的

实战示例

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

// 使用 ref 管理单个状态
const isLoading = ref(false)

// 使用 reactive 管理复杂状态
const user = reactive({
  name: '张三',
  age: 20,
  address: {
    city: '北京',
    district: '朝阳区'
  }
})

// 使用 toRefs 解构响应式对象
const { name, age } = toRefs(user)

// 修改状态
function updateUser() {
  isLoading.value = true
  
  // 模拟异步操作
  setTimeout(() => {
    name.value = '李四'
    age.value = 21
    user.address.city = '上海'
    isLoading.value = false
  }, 1000)
}

通过这些响应式 API，我们可以灵活地管理组件的状态，实现数据的响应式更新。