Vue3中ref和reactive的区别与使用场景
vue3带来了全新的响应式系统，其中ref和reactive是最常用的两个api。很多初学者对它们的使用感到困惑。本文将帮你彻底理解这两个重要的概念。
什么是ref？
ref用于创建一个响应式的数据引用。它可以包装任何类型的值，包括基本类型和对象类型。
import { ref } from 'vue'
// 创建响应式数据
const count = ref(0)
const message = ref('Hello')
const user = ref({ name: '张三', age: 25 })
// 访问值时需要使用.value
console.log(count.value) // 输出: 0
count.value++ // 修改值在模板中使用ref时，Vue会自动解包，不需要写.value：
<template>
<div>{{ count }}</div>
<button @click="count++">增加</button>
</template>什么是reactive？
reactive用于创建一个响应式的对象，它只能接收对象类型的数据。
import { reactive } from 'vue'
// 创建响应式对象
const user = reactive({
name: '李四',
age: 30,
address: {
city: '北京'
}
})
// 直接访问属性，不需要.value
console.log(user.name) // 输出: 李四
user.age = 31 // 修改属性主要区别
数据类型支持不同
ref支持所有数据类型
reactive只支持对象和数组
访问方式不同
ref需要通过.value访问
reactive直接访问属性
重新赋值表现不同
ref可以重新赋值整个对象
reactive不能直接替换整个对象
使用场景建议
使用ref的情况：
基本类型数据（字符串、数字、布尔值）
需要重新赋值的对象
模板引用的dom元素
const isLoading = ref(false) // 布尔值
const inputRef = ref(null) // DOM引用使用reactive的情况：
复杂的对象或数据结构
不需要重新赋值的对象
表单数据对象
const formData = reactive({
username: '',
password: '',
remember: false
})实际开发技巧
结合使用：通常会在reactive对象中使用ref
const state = reactive({
count: ref(0),
user: ref({ name: '王五' })
})解构响应式：使用toRefs保持响应式
const user = reactive({ name: '赵六', age: 28 })
const { name, age } = toRefs(user) // 解构后仍保持响应式总结
ref和reactive都是Vue3响应式系统的核心。选择哪个取决于你的具体需求：
用ref处理基本类型和需要重新赋值的值
用reactive处理复杂的对象结构
在实际项目中，两者经常结合使用
理解它们的区别和适用场景，能够帮助你写出更清晰、更高效的Vue3代码。记住这些要点，你在使用Vue3时就能做出更合适的选择。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！