Vue3 组合式 API 入门

什么是组合式 API？

Vue3 带来了全新的组合式 API（Composition API），这是一种更灵活的代码组织方式。

为什么需要组合式 API？

在 Vue2 的 Options API 中，我们通过 data、methods、computed 等选项来组织代码。但当组件变得复杂时，相关逻辑会被分散到不同的选项中，导致维护困难。

// Options API 示例
export default {
  data() {
    return {
      count: 0,
      todos: []
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

组合式 API 的优势

1. 逻辑复用更简单：通过组合函数轻松实现逻辑复用
2. 代码组织更灵活：相关逻辑可以放在一起
3. 更好的类型推导：对 TypeScript 支持更好

// Composition API 示例
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    return {
      count,
      double,
      increment
    }
  }
}

核心 API 介绍

ref

ref 用于创建响应式的引用对象。

reactive

reactive 用于创建对象的响应式代理。

computed

computed 用于创建计算属性。

总结

组合式 API 是 Vue3 最重要的特性之一，它让代码组织更加灵活，特别适合大型项目的开发。

提示：组合式 API 和 Options API 可以混合使用，你可以根据项目需求选择合适的方式。