引言
Vue 3 的发布带来了革命性的变化，其中最引人注目的就是 Composition API 的引入。这一新特性彻底改变了我们编写 Vue 组件的方式，使得代码组织更加灵活、可复用性更强。相比于传统的 Options API，Composition API 提供了更强大的组合能力，让开发者能够以更自然的方式组织逻辑代码。
在本文中，我们将深入探讨 Vue 3 Composition API 的核心概念，并通过实际案例演示如何从组件设计到状态管理的完整开发流程。我们将涵盖响应式编程、逻辑复用、组件重构等高级特性，帮助你提升 Vue 应用的开发效率和代码质量。
Vue 3 Composition API 核心概念
什么是 Composition API
Composition API 是 Vue 3 中引入的一种新的组件逻辑组织方式。它允许我们使用函数来组织和复用组件逻辑，而不是传统的选项式 API（Options API）。通过 Composition API，我们可以将相关的逻辑代码组合在一起，而不是按照选项类型分散在不同的属性中。
响应式基础
在深入 Composition API 之前，我们需要理解 Vue 3 的响应式系统。Vue 3 使用了基于 Proxy 的响应式系统，这比 Vue 2 的 Object.defineProperty 更加灵活和强大。
import { ref, reactive, computed } from 'vue'
// 创建响应式数据
const count = ref(0)
const user = reactive({
name: 'John',
age: 30
})
// 计算属性
const doubleCount = computed(() => count.value * 2)
// 修改数据
count.value++
user.age = 31
核心函数详解
Composition API 提供了多个核心函数来处理响应式数据和组件逻辑：
ref: 创建响应式的数据引用reactive: 创建响应式的对象computed: 创建计算属性watch: 监听数据变化watchEffect: 自动监听依赖的变化
组件重构实践
从 Options API 到 Composition API
让我们通过一个实际的示例来展示如何将传统的 Options API 重构为 Composition API。
传统 Options API 写法：
export default {
data() {
return {
count: 0,
user: {
name: '',
email: ''
},
loading: false
}
},
computed: {
formattedCount() {
return `Count: ${this.count}`
},
isUserValid() {
return this.user.name && this.user.email
}
},
methods: {
increment() {
this.count++
},
async fetchUserData() {
this.loading = true
try {
const response = await fetch('/api/user')
this.user = await response.json()
} catch (error) {
console.error('Error fetching user:', error)
} finally {
this.loading = false
}
}
},
mounted() {
this.fetchUserData()
}
}
重构后的 Composition API 写法：
import { ref, computed, onMounted } from 'vue'
export default {
setup() {
// 响应式数据
const count = ref(0)
const user = ref({
name: '',
email: ''
})
const loading = ref(false)
// 计算属性
const formattedCount = computed(() => `Count: ${count.value}`)
const isUserValid = computed(() => user.value.name && user.value.email)
// 方法
const increment = () => {
count.value++
}
const fetchUserData = async () => {
loading.value = true
try {
const response = await fetch('/api/user')
user.value = await response.json()
} catch (error) {
console.error('Error fetching user:', error)
} finally {
loading.value = false
}
}
// 生命周期钩子
onMounted(() => {
fetchUserData()
})
// 返回给模板使用的数据和方法
return {
count,
user,
loading,
formattedCount,
isUserValid,
increment,
fetchUserData
}
}
}
更复杂的组件重构
让我们看一个更复杂的例子，展示如何处理表单验证和异步操作：
import { ref, reactive, computed, watch, onMounted } from 'vue'
export default {
props: {
userId: {
type: Number,
required: true
}
},
setup(props) {
// 表单数据
const formData = reactive({
name: '',
email: '',
phone: ''
})
// 表单验证规则
const validationRules = {
name: value => value.length >= 2,
email: value => /\S+@\S+\.\S+/.test(value),
phone: value => /^[\d\s\-\(\)]+$/.test(value)
}
// 验证状态
const errors = reactive({})
const isValid = ref(false)
// 响应式数据
const loading = ref(false)
const submitted = ref(false)
// 计算属性
const isFormValid = computed(() => {
return Object.values(errors).every(error => !error)
})
// 验证单个字段
const validateField = (field) => {
if (formData[field]) {
errors[field] = !validationRules[field](formData[field])
} else {
errors[field] = true
}
}
// 验证所有字段
const validateForm = () => {
Object.keys(formData).forEach(field => {
validateField(field)
})
isValid.value = isFormValid.value
}
// 监听表单变化
watch(formData, () => {
validateForm()
}, { deep: true })
// 获取用户数据
const fetchUserData = async () => {
loading.value = true
try {
const response = await fetch(`/api/users/${props.userId}`)
const userData = await response.json()
Object.assign(formData, userData)
} catch (error) {
console.error('Error fetching user:', error)
} finally {
loading.value = false
}
}
// 提交表单
const handleSubmit = async () => {
if (!isValid.value) return
loading.value = true
try {
await fetch(`/api/users/${props.userId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
submitted.value = true
// 重置提交状态
setTimeout(() => {
submitted.value = false
}, 3000)
} catch (error) {
console.error('Error submitting form:', error)
} finally {
loading.value = false
}
}
// 初始化数据
onMounted(() => {
fetchUserData()
})
return {
formData,
errors,
loading,
submitted,
isValid,
validateField,
handleSubmit
}
}
}
状态管理最佳实践
组合式函数（Composable）模式
组合式函数是 Composition API 的核心概念之一，它允许我们将可复用的逻辑封装成独立的函数。
// composables/useCounter.js
import { ref, computed } from 'vue'
export function useCounter(initialValue = 0) {
const count = ref(initialValue)
const increment = () => {
count.value++
}
const decrement = () => {
count.value--
}
const reset = () => {
count.value = initialValue
}
const doubleCount = computed(() => count.value * 2)
return {
count,
increment,
decrement,
reset,
doubleCount
}
}
// composables/useAsyncData.js
import { ref, readonly } from 'vue'
export function useAsyncData(fetcher) {
const data = ref(null)
const loading = ref(false)
const error = ref(null)
const execute = async () => {
loading.value = true
error.value = null
try {
data.value = await fetcher()
} catch (err) {
error.value = err
} finally {
loading.value = false
}
}
return {
data: readonly(data),
loading: readonly(loading),
error: readonly(error),
execute
}
}
// composables/useLocalStorage.js
import { ref, watch } from 'vue'
export function useLocalStorage(key, initialValue) {
const storedValue = localStorage.getItem(key)
const value = ref(storedValue ? JSON.parse(storedValue) : initialValue)
watch(value, (newValue) => {
localStorage.setItem(key, JSON.stringify(newValue))
}, { deep: true })
return value
}
在组件中使用组合式函数
import { useCounter } from '@/composables/useCounter'
import { useAsyncData } from '@/composables/useAsyncData'
import { useLocalStorage } from '@/composables/useLocalStorage'
export default {
setup() {
// 使用计数器组合式函数
const { count, increment, decrement, doubleCount } = useCounter(0)
// 使用异步数据组合式函数
const { data: userData, loading: userLoading, execute: fetchUser } =
useAsyncData(() => fetch('/api/user').then(res => res.json()))
// 使用本地存储组合式函数
const preferences = useLocalStorage('user-preferences', {
theme: 'light',
notifications: true
})
return {
count,
increment,
decrement,
doubleCount,
userData,
userLoading,
fetchUser,
preferences
}
}
}
复杂状态管理示例
让我们创建一个更复杂的状态管理示例，展示如何在大型应用中使用组合式函数：
// composables/useUserStore.js
import { ref, computed, readonly } from 'vue'
import { useLocalStorage } from './useLocalStorage'
export function useUserStore() {
// 状态
const currentUser = ref(null)
const isAuthenticated = ref(false)
const loading = ref(false)
const error = ref(null)
// 持久化存储
const storedUser = useLocalStorage('current-user', null)
const storedAuth = useLocalStorage('is-authenticated', false)
// 计算属性
const userRole = computed(() => {
if (!currentUser.value) return 'guest'
return currentUser.value.role || 'user'
})
const hasPermission = (permission) => {
if (!currentUser.value || !currentUser.value.permissions) return false
return currentUser.value.permissions.includes(permission)
}
// 方法
const login = async (credentials) => {
loading.value = true
error.value = null
try {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(credentials)
})
if (!response.ok) {
throw new Error('Login failed')
}
const userData = await response.json()
currentUser.value = userData
isAuthenticated.value = true
// 同步到持久化存储
storedUser.value = userData
storedAuth.value = true
} catch (err) {
error.value = err.message
throw err
} finally {
loading.value = false
}
}
const logout = () => {
currentUser.value = null
isAuthenticated.value = false
storedUser.value = null
storedAuth.value = false
}
const refreshUser = async () => {
if (!isAuthenticated.value) return
loading.value = true
try {
const response = await fetch('/api/auth/me')
const userData = await response.json()
currentUser.value = userData
storedUser.value = userData
} catch (err) {
error.value = err.message
} finally {
loading.value = false
}
}
// 初始化
if (storedUser.value && storedAuth.value) {
currentUser.value = storedUser.value
isAuthenticated.value = true
}
return {
currentUser: readonly(currentUser),
isAuthenticated: readonly(isAuthenticated),
loading: readonly(loading),
error: readonly(error),
userRole,
hasPermission,
login,
logout,
refreshUser
}
}
// composables/useApi.js
import { ref, readonly } from 'vue'
export function useApi(baseURL) {
const loading = ref(false)
const error = ref(null)
const request = async (url, options = {}) => {
loading.value = true
error.value = null
try {
const response = await fetch(`${baseURL}${url}`, {
headers: {
'Content-Type': 'application/json',
...options.headers
},
...options
})
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
return await response.json()
} catch (err) {
error.value = err.message
throw err
} finally {
loading.value = false
}
}
const get = async (url) => request(url, { method: 'GET' })
const post = async (url, data) => request(url, { method: 'POST', body: JSON.stringify(data) })
const put = async (url, data) => request(url, { method: 'PUT', body: JSON.stringify(data) })
const del = async (url) => request(url, { method: 'DELETE' })
return {
loading: readonly(loading),
error: readonly(error),
get,
post,
put,
del
}
}
响应式编程高级技巧
深度监听与性能优化
在使用 Composition API 时，合理地处理响应式数据的监听对于性能至关重要：
import { ref, watch, watchEffect } from 'vue'
export default {
setup() {
const user = ref({
profile: {
name: 'John',
settings: {
theme: 'light',
notifications: true
}
},
preferences: ['reading', 'coding']
})
// 深度监听 - 适用于需要监听整个对象变化的情况
watch(user, (newUser, oldUser) => {
console.log('User changed:', newUser)
}, { deep: true })
// 浅层监听 - 只监听顶层属性变化
watch(user, (newUser, oldUser) => {
console.log('User reference changed')
}, { deep: false })
// 监听特定路径的变化
watch(() => user.value.profile.name, (newName, oldName) => {
console.log(`Name changed from ${oldName} to ${newName}`)
})
// 使用 watchEffect 自动追踪依赖
watchEffect(() => {
console.log('Current name:', user.value.profile.name)
console.log('Current theme:', user.value.profile.settings.theme)
})
return {
user
}
}
}
异步数据处理
处理异步操作是现代前端应用的重要组成部分：
import { ref, computed, watch } from 'vue'
export default {
setup() {
const searchQuery = ref('')
const searchResults = ref([])
const loading = ref(false)
const error = ref(null)
// 防抖搜索函数
const debouncedSearch = debounce(async (query) => {
if (!query.trim()) {
searchResults.value = []
return
}
loading.value = true
error.value = null
try {
const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`)
const results = await response.json()
searchResults.value = results
} catch (err) {
error.value = err.message
} finally {
loading.value = false
}
}, 300)
// 监听搜索查询变化
watch(searchQuery, (newQuery) => {
debouncedSearch(newQuery)
})
// 计算属性 - 搜索结果数量
const resultCount = computed(() => searchResults.value.length)
// 清空搜索
const clearSearch = () => {
searchQuery.value = ''
searchResults.value = []
error.value = null
}
return {
searchQuery,
searchResults,
loading,
error,
resultCount,
clearSearch
}
}
}
// 防抖函数实现
function debounce(func, wait) {
let timeout
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout)
func(...args)
}
clearTimeout(timeout)
timeout = setTimeout(later, wait)
}
}
组件通信最佳实践
父子组件通信
// Parent.vue
import { ref } from 'vue'
import Child from './Child.vue'
export default {
components: {
Child
},
setup() {
const parentMessage = ref('Hello from parent')
const childData = ref(null)
const handleChildEvent = (data) => {
childData.value = data
console.log('Received from child:', data)
}
return {
parentMessage,
childData,
handleChildEvent
}
}
}
// Child.vue
import { ref, emit } from 'vue'
export default {
props: {
message: String
},
setup(props, { emit }) {
const childData = ref('Hello from child')
const sendDataToParent = () => {
emit('child-event', childData.value)
}
return {
childData,
sendDataToParent
}
}
}
兄弟组件通信
// composables/useEventBus.js
import { ref } from 'vue'
const events = ref({})
export function useEventBus() {
const on = (eventName, callback) => {
if (!events.value[eventName]) {
events.value[eventName] = []
}
events.value[eventName].push(callback)
}
const emit = (eventName, data) => {
if (events.value[eventName]) {
events.value[eventName].forEach(callback => callback(data))
}
}
const off = (eventName, callback) => {
if (events.value[eventName]) {
events.value[eventName] = events.value[eventName].filter(cb => cb !== callback)
}
}
return {
on,
emit,
off
}
}
// 使用示例
import { useEventBus } from '@/composables/useEventBus'
export default {
setup() {
const eventBus = useEventBus()
// 发送事件
const sendMessage = () => {
eventBus.emit('message-sent', 'Hello from component A')
}
// 监听事件
const handleReceivedMessage = (data) => {
console.log('Received:', data)
}
eventBus.on('message-sent', handleReceivedMessage)
return {
sendMessage
}
}
}
性能优化策略
计算属性缓存
import { ref, computed } from 'vue'
export default {
setup() {
const items = ref([])
const filterText = ref('')
// 复杂的计算属性，使用缓存
const filteredItems = computed(() => {
if (!filterText.value) return items.value
return items.value.filter(item =>
item.name.toLowerCase().includes(filterText.value.toLowerCase())
)
})
// 高频计算的复杂逻辑
const expensiveCalculation = computed(() => {
// 模拟复杂的计算
let result = 0
for (let i = 0; i < items.value.length; i++) {
result += items.value[i].value * Math.sin(i)
}
return result
})
return {
items,
filterText,
filteredItems,
expensiveCalculation
}
}
}
组件懒加载与动态导入
import { defineAsyncComponent, ref } from 'vue'
export default {
setup() {
// 动态导入组件
const AsyncComponent = defineAsyncComponent(() =>
import('./HeavyComponent.vue')
)
// 带有加载状态的异步组件
const AsyncComponentWithLoading = defineAsyncComponent({
loader: () => import('./HeavyComponent.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorComponent,
delay: 200,
timeout: 3000
})
// 条件加载
const showComponent = ref(false)
const toggleComponent = () => {
showComponent.value = !showComponent.value
}
return {
AsyncComponent,
AsyncComponentWithLoading,
showComponent,
toggleComponent
}
}
}
测试友好性
组合式函数的测试
// composables/useCounter.test.js
import { useCounter } from '@/composables/useCounter'
import { nextTick } from 'vue'
describe('useCounter', () => {
it('should initialize with correct value', () => {
const { count } = useCounter(5)
expect(count.value).toBe(5)
})
it('should increment correctly', () => {
const { count, increment } = useCounter()
expect(count.value).toBe(0)
increment()
expect(count.value).toBe(1)
})
it('should decrement correctly', () => {
const { count, decrement } = useCounter(5)
expect(count.value).toBe(5)
decrement()
expect(count.value).toBe(4)
})
it('should reset correctly', () => {
const { count, increment, reset } = useCounter(10)
increment()
expect(count.value).toBe(11)
reset()
expect(count.value).toBe(10)
})
})
// composables/useAsyncData.test.js
import { useAsyncData } from '@/composables/useAsyncData'
import { nextTick } from 'vue'
describe('useAsyncData', () => {
beforeEach(() => {
// 清理测试环境
jest.clearAllMocks()
})
it('should fetch data correctly', async () => {
const mockData = { name: 'John' }
global.fetch = jest.fn().mockResolvedValue({
json: () => Promise.resolve(mockData)
})
const { data, loading, execute } = useAsyncData(() =>
fetch('/api/data').then(res => res.json())
)
expect(loading.value).toBe(false)
await execute()
expect(loading.value).toBe(false)
expect(data.value).toEqual(mockData)
})
})
总结与最佳实践
关键要点回顾
通过本文的深入探讨，我们总结了 Vue 3 Composition API 的几个关键最佳实践：
- 合理组织逻辑：将相关的业务逻辑组合在一起，避免选项式 API 中逻辑分散的问题
- 组合式函数复用：创建可复用的组合式函数来封装通用逻辑
- 响应式数据管理：正确使用 ref、reactive 等响应式 API
- 性能优化：合理使用计算属性、防抖、节流等技术
- 测试友好性：编写易于测试的组合式函数和组件
实际应用建议
在实际项目中，建议遵循以下原则：
- 从小处着手：对于现有项目，可以逐步将部分组件迁移到 Composition API
- 保持一致性：团队内部应该统一使用某种模式来组织代码
- 文档化：为复杂的组合式函数编写清晰的文档和类型注释
- 监控性能：定期检查应用性能，确保响应式系统的使用不会造成性能问题
未来展望
随着 Vue 3 的不断演进，Composition API 将继续发展和完善。我们期待看到更多优秀的实践模式和工具库出现，进一步提升开发体验和应用质量。
通过掌握这些最佳实践，你将能够构建出更加高效、可维护的 Vue 应用程序，充分发挥 Composition API 的强大能力。记住，好的代码不仅要有功能，更要易于理解和维护，Composition API 正是帮助我们实现这一目标的重要工具。
评论 (0)