新手必看！Vue3中ref和reactive的7个典型使用场景对比（含TS类型标注示例）

Vue3与TypeScript深度实践：ref与reactive的7个核心场景解析

刚接触Vue3的组合式API时，很多开发者会对ref和reactive的选择感到困惑。特别是在TypeScript环境下，如何正确进行类型标注更是一个常见痛点。本文将通过7个典型场景的对比分析，带你建立清晰的使用直觉。

1. 基础概念与类型系统设计

在Vue3的TypeScript开发中，类型系统不是负担而是助力。我们先从最基础的类型标注开始：

// 基本类型标注示例 const count = ref<number>(0) // 显式声明数字类型 const message = ref<string>('Hello') // 显式声明字符串类型

对于复杂对象，推荐先定义接口再使用：

interface User { id: number name: string age?: number // 可选属性 } const user = ref<User>({ id: 1, name: 'Alice' })

类型系统的最佳实践：

• 优先使用interface定义复杂数据结构
• 对于可能为空的属性使用可选标记(?)
• 为API响应数据定义专用类型

2. 表单处理场景对比

表单是前端开发中最常见的交互场景，我们来看两种响应式方案的区别：

ref方案：

// 单个表单字段 const username = ref<string>('') const password = ref<string>('') // 表单提交处理 const handleSubmit = () => { console.log(username.value, password.value) }

reactive方案：

interface LoginForm { username: string password: string } const form = reactive<LoginForm>({ username: '', password: '' }) const handleSubmit = () => { console.log(form.username, form.password) // 不需要.value }

提示：对于大型表单，reactive方案更利于维护和类型检查

3. 组件通信中的类型安全

组件通信时保持类型安全至关重要，我们看props的两种定义方式：

选项式API：

import { defineComponent } from 'vue' interface Props { title: string count?: number } export default defineComponent({ props: { title: { type: String, required: true }, count: { type: Number, default: 0 } }, setup(props: Props) { // 现在props有完整类型提示 } })

组合式API：

const props = defineProps<{ title: string count?: number }>()

对于emit事件，也有完整的类型支持：

const emit = defineEmits<{ (e: 'update', value: number): void (e: 'submit', value: string): void }>()

4. 全局状态管理策略

在大型应用中，如何组织全局状态？我们比较两种模式：

基于reactive的store模式：

interface AppState { user: User | null settings: { theme: 'light' | 'dark' locale: string } } const store = reactive<AppState>({ user: null, settings: { theme: 'light', locale: 'en-US' } }) // 使用provide/inject跨组件共享 provide('store', store)

基于ref的composition函数：

function useCounter() { const count = ref<number>(0) function increment() { count.value++ } return { count, increment } }

关键选择因素：

• 状态复杂度
• 是否需要跨组件共享
• 逻辑复用需求

5. 异步数据处理模式

处理异步数据时，类型系统能帮我们避免很多运行时错误：

interface Post { id: number title: string body: string } // 使用ref存储异步数据 const posts = ref<Post[]>([]) const loading = ref<boolean>(false) const error = ref<Error | null>(null) async function fetchPosts() { try { loading.value = true const response = await fetch('/api/posts') posts.value = await response.json() } catch (err) { error.value = err as Error } finally { loading.value = false } }

更优雅的方案是使用reactive组合：

const postState = reactive({ data: [] as Post[], loading: false, error: null as Error | null }) async function fetchPosts() { try { postState.loading = true const response = await fetch('/api/posts') postState.data = await response.json() } catch (err) { postState.error = err as Error } finally { postState.loading = false } }

6. 复杂对象与嵌套结构

当处理嵌套对象时，reactive的优势更加明显：

interface CartItem { id: number name: string price: number quantity: number } interface ShoppingCart { items: CartItem[] discountCodes: string[] total: number } const cart = reactive<ShoppingCart>({ items: [], discountCodes: [], get total() { return this.items.reduce( (sum, item) => sum + item.price * item.quantity, 0 ) } }) // 添加商品 function addItem(item: CartItem) { const existing = cart.items.find(i => i.id === item.id) if (existing) { existing.quantity += item.quantity } else { cart.items.push(item) } }

这种场景下，reactive提供了：

• 更直观的对象操作
• 完整的类型提示
• 计算属性的自然集成

7. 动态组件与高阶模式

在高级场景中，我们可以结合泛型创造灵活的类型安全组件：

interface Tab<T> { id: string label: string content: T } function useTabs<T>(initialTabs: Tab<T>[]) { const tabs = ref<Tab<T>[]>(initialTabs) const activeTab = ref<string>(initialTabs[0]?.id || '') const activeContent = computed(() => { return tabs.value.find(tab => tab.id === activeTab.value)?.content }) return { tabs, activeTab, activeContent } } // 使用示例 const { tabs, activeTab, activeContent } = useTabs<number>([ { id: 'tab1', label: 'Counter', content: 0 }, { id: 'tab2', label: 'Total', content: 100 } ])

这种模式特别适合：

• 可复用的高阶组件
• 插件开发
• 需要高度类型安全的场景