登录 注册

Vue 3 Composition API实战：从基础到高级的响应式编程完整教程

Julia659
Julia659 2026-02-26T21:02:04+08:00
0 0 0

前言

Vue 3 的发布带来了革命性的变化，其中最引人注目的就是 Composition API 的引入。这一新特性为开发者提供了更加灵活和强大的组件开发方式，特别是在处理复杂组件逻辑时，相比传统的 Options API 显示出明显的优势。本文将深入探讨 Vue 3 Composition API 的核心特性和使用方法，从基础响应式 API 到高级应用技巧，帮助开发者全面掌握这一重要技术。

什么是 Composition API

Composition API 是 Vue 3 中引入的一种新的组件逻辑组织方式，它允许开发者以函数的形式组织和复用组件逻辑，而不再局限于传统的选项式 API（Options API）。这种设计模式借鉴了函数式编程的思想，使得组件逻辑更加模块化、可复用和易于维护。

Composition API 的核心优势

  1. 更好的逻辑复用：通过组合函数（composable）可以轻松地在组件间共享和复用逻辑
  2. 更清晰的代码结构：将相关的逻辑组织在一起，而不是分散在不同的选项中
  3. 更灵活的组件设计：可以更自由地组织和管理组件的状态和行为
  4. 更好的 TypeScript 支持：与 TypeScript 集成更加自然和直观

响应式基础：reactive 和 ref

在深入 Composition API 之前，我们需要先理解 Vue 3 的响应式系统基础。Vue 3 提供了两种主要的响应式 API：reactive 和 ref。

reactive API

reactive 是 Vue 3 中用于创建响应式对象的核心 API。它接收一个普通对象并返回该对象的响应式代理。

import { reactive } from 'vue'

// 创建响应式对象
const state = reactive({
  count: 0,
  name: 'Vue',
  user: {
    firstName: 'John',
    lastName: 'Doe'
  }
})

// 修改属性会触发响应
state.count = 1
state.user.firstName = 'Jane'

// 响应式对象的属性变化会被监听
console.log(state.count) // 1
console.log(state.user.firstName) // Jane

ref API

ref 用于创建响应式数据，它可以处理基本数据类型和对象类型。对于基本数据类型，ref 会创建一个包含 .value 属性的响应式引用。

import { ref } from 'vue'

// 创建基本数据类型的响应式引用
const count = ref(0)
const name = ref('Vue')

// 访问和修改值需要通过 .value
console.log(count.value) // 0
count.value = 1
console.log(count.value) // 1

// 创建对象类型的响应式引用
const user = ref({
  firstName: 'John',
  lastName: 'Doe'
})

console.log(user.value.firstName) // John
user.value.firstName = 'Jane'
console.log(user.value.firstName) // Jane

reactive vs ref 的选择

选择使用 reactive 还是 ref 主要取决于使用场景：

  • 使用 ref：当需要处理基本数据类型、需要在模板中直接使用时
  • 使用 reactive：当需要处理复杂对象，或者在组合函数中返回多个值时
// 推荐：基本数据类型使用 ref
const count = ref(0)
const message = ref('Hello')

// 推荐：复杂对象使用 reactive
const state = reactive({
  user: {
    name: 'John',
    age: 30
  },
  items: []
})

// 不推荐：基本数据类型使用 reactive（虽然可行）
const count = reactive({ value: 0 }) // 多余的包装

计算属性：computed

计算属性是 Vue 中非常重要的概念，它允许我们基于响应式数据计算出新的值。在 Composition API 中，我们使用 computed API 来创建计算属性。

基础计算属性

import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// 创建只读计算属性
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

console.log(fullName.value) // John Doe

// 修改源数据会自动触发计算属性更新
firstName.value = 'Jane'
console.log(fullName.value) // Jane Doe

可读写的计算属性

import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// 创建可读写的计算属性
const fullName = computed({
  get: () => {
    return `${firstName.value} ${lastName.value}`
  },
  set: (value) => {
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1]
  }
})

console.log(fullName.value) // John Doe

// 设置计算属性会更新源数据
fullName.value = 'Jane Smith'
console.log(firstName.value) // Jane
console.log(lastName.value) // Smith

计算属性的性能优化

计算属性会自动缓存结果，只有当依赖的响应式数据发生变化时才会重新计算：

import { ref, computed } from 'vue'

const count = ref(0)
const expensiveValue = computed(() => {
  console.log('计算 expensiveValue')
  return count.value * 1000
})

// 第一次访问会输出 "计算 expensiveValue"
console.log(expensiveValue.value)

// 第二次访问不会输出，因为结果被缓存
console.log(expensiveValue.value)

// 当 count 变化时，计算属性会重新计算
count.value = 5
console.log(expensiveValue.value) // 输出 "计算 expensiveValue"，然后输出 5000

生命周期钩子

在 Composition API 中，我们使用 onMounted、onUpdated、onUnmounted 等函数来处理组件生命周期：

import { ref, onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    onMounted(() => {
      console.log('组件已挂载')
      // 执行初始化逻辑
    })
    
    onUpdated(() => {
      console.log('组件已更新')
      // 执行更新后的逻辑
    })
    
    onUnmounted(() => {
      console.log('组件即将卸载')
      // 清理工作
    })
    
    return {
      count
    }
  }
}

组合函数：逻辑复用的核心

组合函数是 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
  }
}

使用组合函数

// components/Counter.vue
import { defineComponent } from 'vue'
import { useCounter } from '@/composables/useCounter'

export default defineComponent({
  setup() {
    const { count, increment, decrement, reset, doubleCount } = useCounter(10)
    
    return {
      count,
      increment,
      decrement,
      reset,
      doubleCount
    }
  }
})

复杂组合函数示例

// composables/useApi.js
import { ref, computed } from 'vue'

export function useApi(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)
  
  const fetchData = async () => {
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }
  
  const hasData = computed(() => !!data.value)
  const hasError = computed(() => !!error.value)
  
  return {
    data,
    loading,
    error,
    fetchData,
    hasData,
    hasError
  }
}

实际项目应用案例

搜索功能实现

// composables/useSearch.js
import { ref, computed, watch } from 'vue'

export function useSearch(apiUrl) {
  const searchQuery = ref('')
  const searchResults = ref([])
  const loading = ref(false)
  const error = ref(null)
  
  const debouncedSearch = computed(() => {
    // 简单的防抖实现
    let timeout
    return (query) => {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        searchQuery.value = query
      }, 300)
    }
  })
  
  const search = async (query) => {
    if (!query) {
      searchResults.value = []
      return
    }
    
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch(`${apiUrl}?q=${query}`)
      searchResults.value = await response.json()
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }
  
  // 监听搜索查询变化
  watch(searchQuery, (newQuery) => {
    if (newQuery) {
      search(newQuery)
    } else {
      searchResults.value = []
    }
  })
  
  return {
    searchQuery,
    searchResults,
    loading,
    error,
    debouncedSearch,
    search
  }
}

表单验证组合函数

// composables/useFormValidation.js
import { ref, computed } from 'vue'

export function useFormValidation(initialForm = {}) {
  const form = ref({ ...initialForm })
  const errors = ref({})
  
  const isValid = computed(() => {
    return Object.values(errors.value).every(error => !error)
  })
  
  const validateField = (fieldName, value, rules) => {
    let errorMessage = ''
    
    for (const rule of rules) {
      if (!rule.test(value)) {
        errorMessage = rule.message
        break
      }
    }
    
    errors.value[fieldName] = errorMessage
    return !errorMessage
  }
  
  const validateForm = (rules) => {
    const formErrors = {}
    let isValid = true
    
    for (const [fieldName, fieldRules] of Object.entries(rules)) {
      const value = form.value[fieldName]
      const fieldValid = validateField(fieldName, value, fieldRules)
      
      if (!fieldValid) {
        isValid = false
      }
    }
    
    return isValid
  }
  
  const setFormValue = (fieldName, value) => {
    form.value[fieldName] = value
  }
  
  return {
    form,
    errors,
    isValid,
    validateField,
    validateForm,
    setFormValue
  }
}

高级技巧和最佳实践

响应式数据的深层嵌套处理

import { ref, reactive, toRefs, toRaw } from 'vue'

// 处理深层嵌套的对象
const deepState = reactive({
  user: {
    profile: {
      personal: {
        name: 'John',
        age: 30
      }
    }
  }
})

// 使用 toRefs 可以将响应式对象转换为 ref
const { user } = toRefs(deepState)

// 使用 toRaw 获取原始对象（不推荐频繁使用）
const rawState = toRaw(deepState)

性能优化技巧

// 使用 computed 缓存复杂计算
const expensiveData = computed(() => {
  // 复杂的计算逻辑
  return someExpensiveOperation(data.value)
})

// 使用 watchEffect 自动追踪依赖
watchEffect(() => {
  // 自动追踪所有响应式数据
  console.log(data.value, count.value)
})

// 条件监听
watch(data, (newData, oldData) => {
  // 只在特定条件下执行
  if (newData.length > 0) {
    // 处理逻辑
  }
})

TypeScript 集成

import { ref, computed, ComputedRef } from 'vue'

interface User {
  id: number
  name: string
  email: string
}

const user = ref<User | null>(null)
const userName = computed(() => user.value?.name || '')

// 类型安全的组合函数
export function useTypedCounter(initialValue: number = 0) {
  const count = ref<number>(initialValue)
  
  const increment = () => {
    count.value++
  }
  
  const decrement = () => {
    count.value--
  }
  
  return {
    count,
    increment,
    decrement
  }
}

与 Options API 的对比

传统 Options API

export default {
  data() {
    return {
      count: 0,
      name: 'Vue'
    }
  },
  
  computed: {
    fullName() {
      return `${this.name} 3`
    }
  },
  
  methods: {
    increment() {
      this.count++
    }
  },
  
  mounted() {
    console.log('组件已挂载')
  }
}

Composition API

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const name = ref('Vue')
    
    const fullName = computed(() => `${name.value} 3`)
    
    const increment = () => {
      count.value++
    }
    
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    return {
      count,
      name,
      fullName,
      increment
    }
  }
}

常见问题和解决方案

1. 响应式数据丢失问题

// ❌ 错误做法
const state = reactive({ count: 0 })
const count = state.count // 这样会丢失响应性

// ✅ 正确做法
const state = reactive({ count: 0 })
const count = computed(() => state.count) // 保持响应性

2. 组合函数中的 this 指向问题

// ❌ 错误做法
export function useCounter() {
  const count = ref(0)
  
  const increment = function() {
    this.count++ // this 指向不明确
  }
  
  return { count, increment }
}

// ✅ 正确做法
export function useCounter() {
  const count = ref(0)
  
  const increment = () => {
    count.value++ // 使用箭头函数保持 this 指向
  }
  
  return { count, increment }
}

3. 多个组合函数的组合使用

import { useCounter } from './composables/useCounter'
import { useApi } from './composables/useApi'

export default {
  setup() {
    const { count, increment } = useCounter()
    const { data, loading, fetchData } = useApi('/api/users')
    
    return {
      count,
      increment,
      data,
      loading,
      fetchData
    }
  }
}

总结

Vue 3 Composition API 为前端开发带来了全新的开发体验和更强大的功能。通过本文的详细介绍，我们了解了：

  1. 基础响应式 API：reactive 和 ref 的使用方法和选择原则
  2. 计算属性：computed 的基础用法和高级特性
  3. 生命周期钩子：如何在组合式 API 中处理组件生命周期
  4. 组合函数：如何创建和使用可复用的逻辑组件
  5. 实际应用案例：搜索功能、表单验证等实际场景的实现
  6. 最佳实践：性能优化、TypeScript 集成等高级技巧

Composition API 的引入让 Vue 组件更加模块化和可复用，特别是在处理复杂业务逻辑时，能够显著提升代码的可维护性和开发效率。随着 Vue 3 的普及，掌握 Composition API 成为了现代前端开发者的必备技能。

通过持续的实践和探索，我们可以更好地利用 Composition API 的强大功能，构建出更加优雅、高效的 Vue 应用程序。记住，好的代码不仅要有功能，更要有良好的结构和可维护性，Composition API 正是帮助我们实现这一目标的重要工具。

# VUE # 3 # Composition
相关推荐
广告位招租

相似文章

    评论 (0)

    0/2000