Vue 3 组合式 API 实战技巧

# Vue 3 组合式 API 实战技巧 ## 前言 Vue 3 带来的组合式 API（Composition API）彻底改变了我们编写 Vue 组件的方式。本文将分享一些在实际项目中使用组合式 API 的实用技巧。 ## 1. 复用逻辑：Composables 组合式 API 最大的优势在于逻辑复用。通过创建可复用的组合函数（Composables），我们可以把状态逻辑抽象出来： ```javascript // useCounter.js import { ref, computed } from 'vue' export function useCounter(initial = 0) { const count = ref(initial) const doubled = computed(() => count.value * 2) const increment = () => count.value++ const decrement = () => count.value-- return { count, doubled, increment, decrement } } ``` ## 2. 响应式状态管理 对于简单的跨组件状态共享，可以使用 `reactive`： ```javascript // store.js import { reactive } from 'vue' export const store = reactive({ user: null, isLoggedIn: false, setUser(user) { this.user = user this.isLoggedIn = !!user } }) ``` ## 3. 生命周期钩子的组合使用 组合式 API 允许我们在同一个地方使用所有生命周期钩子： ```javascript import { onMounted, onUnmounted } from 'vue' export function useEventListener(event, handler) { onMounted(() => window.addEventListener(event, handler)) onUnmounted(() => window.removeEventListener(event, handler)) } ``` ## 4. 异步数据加载 配合 `Suspense` 和 `async setup`，我们可以更优雅地处理异步数据： ```javascript // useFetch.js import { ref } from 'vue' export function useFetch(url) { const data = ref(null) const loading = ref(true) const error = ref(null) fetch(url) .then(res => res.json()) .then(json => data.value = json) .catch(err => error.value = err) .finally(() => loading.value = false) return { data, loading, error } } ``` ## 5. 最佳实践建议 1. **保持简洁**：每个 Composable 应该只做一件事 2. **命名规范**：以 `use` 开头，如 `useUser`、`useCart` 3. **类型支持**：使用 TypeScript 获得更好的类型推断 4. **避免响应式丢失**：使用 `toRefs` 保持解构响应性 ## 结语 组合式 API 让 Vue 代码更加灵活和可维护。希望这些技巧能帮助你写出更好的 Vue 3 代码！