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 // 修改属性

主要区别

1. 数据类型支持不同

   • ref支持所有数据类型

   • reactive只支持对象和数组

2. 访问方式不同

   • ref需要通过.value访问

   • reactive直接访问属性

3. 重新赋值表现不同

• ref可以重新赋值整个对象

• reactive不能直接替换整个对象

使用场景建议

使用ref的情况：

• 基本类型数据（字符串、数字、布尔值）

• 需要重新赋值的对象

• 模板引用的dom元素

const isLoading = ref(false) // 布尔值
const inputRef = ref(null) // DOM引用

使用reactive的情况：

• 复杂的对象或数据结构

• 不需要重新赋值的对象

• 表单数据对象

const formData = reactive({
  username: '',
  password: '',
  remember: false
})

实际开发技巧

1. 结合使用：通常会在reactive对象中使用ref

const state = reactive({
  count: ref(0),
  user: ref({ name: '王五' })
})

2. 解构响应式：使用toRefs保持响应式

const user = reactive({ name: '赵六', age: 28 })
const { name, age } = toRefs(user) // 解构后仍保持响应式

总结

ref和reactive都是Vue3响应式系统的核心。选择哪个取决于你的具体需求：

• 用ref处理基本类型和需要重新赋值的值

• 用reactive处理复杂的对象结构

• 在实际项目中，两者经常结合使用

理解它们的区别和适用场景，能够帮助你写出更清晰、更高效的Vue3代码。记住这些要点，你在使用Vue3时就能做出更合适的选择。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12915