ref和reactive的区别

1. 基本概念

ref

• 用于包装基本类型数据（string、number、boolean等）

• 也可以包装对象，但内部会转换为reactive

• 通过.value访问和修改值

reactive

• 只能用于对象类型（Object、Array、Map、Set等）

• 直接访问和修改属性，不需要.value

2. 使用方式对比

import { ref, reactive } from 'vue'

// ref 使用方式
const count = ref(0)
console.log(count.value) // 0
count.value++

const user = ref({ name: 'John', age: 25 })
console.log(user.value.name) // 'John'
user.value.age = 26

// reactive 使用方式
const state = reactive({ count: 0, name: 'John' })
console.log(state.count) // 0
state.count++

const list = reactive([1, 2, 3])
list.push(4)

3. 主要区别

数据类型支持

• ref: 支持所有类型（基本类型 + 对象类型）

• reactive: 只支持对象类型

访问方式

• ref: 需要.value（在模板中自动解包）

• reactive: 直接访问属性

解构和赋值

// ref 可以解构
const { count } = toRefs(user) // 保持响应性

// reactive 解构会失去响应性
const { count } = state // 失去响应性
const count = state.count // 失去响应性

模板中的使用

<template>
  <!-- ref 在模板中自动解包 -->
  <div>{{ count }}</div>
  
  <!-- reactive 直接使用 -->
  <div>{{ state.count }}</div>
</template>

4. 选择建议

使用 ref 的场景：

• 基本类型数据

• 需要解构的响应式数据

• 简单的状态管理

使用 reactive 的场景：

• 复杂对象状态

• 表单数据

• 不需要解构的对象

5. 实际示例

javascript

// 推荐：基本类型用 ref
const isLoading = ref(false)
const errorMessage = ref('')

// 推荐：对象用 reactive
const formData = reactive({
  username: '',
  email: '',
  password: ''
})

// 或者用 ref 包装对象
const userInfo = ref({
  name: '',
  age: 0
})

总的来说，ref更灵活，reactive更简洁。选择哪个主要看你的具体使用场景和偏好！