【vue】选项式api与组合式api

Vue.js 的选项式 API (Options API) 和组合式 API (Composition API) 是两种不同的组件代码组织方式，它们各有特点和适用场景。

选项式 API (Options API)

特点：

基于选项对象组织代码
按功能选项（data、methods、computed、watch、生命周期等）分组
Vue 2 的主要 API 风格，Vue 3 中继续支持

javascript 复制代码

// 选项式 API 示例
export default {
  data() {
    return {
      count: 0,
      message: 'Hello'
    }
  },
  computed: {
    doubledCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('组件已挂载')
  }
}

优点：

结构清晰，适合初学者
按功能类型分组，易于理解
对小型到中型项目友好
this 上下文明确

缺点：

大型组件中，相关逻辑分散在不同选项中
代码复用相对复杂（mixins 有命名冲突等问题）
类型推断不如组合式 API 友好

组合式 API (Composition API)

特点：

基于函数组织代码
按逻辑功能而非选项类型分组
Vue 3 引入的新 API

javascript 复制代码

// 组合式 API 示例
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    // 计数器逻辑
    const count = ref(0)
    const doubledCount = computed(() => count.value * 2)
    const increment = () => {
      count.value++
    }

    // 消息逻辑
    const message = ref('Hello')
    
    onMounted(() => {
      console.log('组件已挂载')
    })

    return {
      count,
      doubledCount,
      increment,
      message
    }
  }
}

javascript 复制代码

// Vue 3.2+ 使用 <script setup> 语法糖更简洁
<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const doubledCount = computed(() => count.value * 2)
const increment = () => { count.value++ }

onMounted(() => {
  console.log('组件已挂载')
})
</script>

主要区别对比

方面	选项式 API	组合式 API
代码组织	按选项类型分组	按逻辑功能分组
代码复用	Mixins（有局限性）	可组合函数（Composables）
TypeScript	支持一般	支持更好，类型推断更强
逻辑关注点	分散在不同选项中	集中在一起
学习曲线	较低，更直观	较高，需要理解响应式系统
this 使用	需要 this 访问属性和方法	不需要 this，直接使用响应式变量
灵活性	相对固定	更高，可灵活组织代码
代码量	中小型组件较少	小型组件可能稍多，大型组件更清晰

实际示例对比

选项式 API：

javascript 复制代码

export default {
  data() {
    return {
      users: [],
      searchQuery: '',
      loading: false
    }
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user => 
        user.name.includes(this.searchQuery)
      )
    }
  },
  methods: {
    async fetchUsers() {
      this.loading = true
      this.users = await fetch('/api/users')
      this.loading = false
    }
  },
  mounted() {
    this.fetchUsers()
  }
}

组合式 API：

javascript 复制代码

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

// 可复用的逻辑
function useUserManagement() {
  const users = ref([])
  const searchQuery = ref('')
  const loading = ref(false)
  
  const filteredUsers = computed(() => 
    users.value.filter(user => 
      user.name.includes(searchQuery.value)
    )
  )
  
  async function fetchUsers() {
    loading.value = true
    users.value = await fetch('/api/users')
    loading.value = false
  }
  
  onMounted(fetchUsers)
  
  return {
    users,
    searchQuery,
    loading,
    filteredUsers,
    fetchUsers
  }
}

export default {
  setup() {
    const { users, searchQuery, loading, filteredUsers, fetchUsers } = useUserManagement()
    
    return {
      users,
      searchQuery,
      loading,
      filteredUsers,
      fetchUsers
    }
  }
}

选择建议

使用选项式 API 的场景：

初学者学习 Vue
小型到中型项目
不需要复杂逻辑复用的场景
迁移 Vue 2 项目

使用组合式 API 的场景：

大型复杂组件
需要更好的 TypeScript 支持
需要更好的逻辑复用（Composables）
团队有 Vue 3 经验
新项目开发

最佳实践

Vue 3 项目：推荐主要使用组合式 API，特别是新项目
渐进迁移：现有项目可以从选项式逐渐迁移到组合式
混合使用：Vue 3 支持两种 API 在同一项目中混合使用
Composition API + <script setup>：Vue 3.2+ 推荐组合

两者都是有效的 Vue 开发方式，选择哪种取决于项目需求、团队经验和具体场景。组合式 API 代表了 Vue 的未来方向，提供了更好的长期可维护性。