Vue Options API vs Composition API

梨子同志
223 阅读5分钟

一、核心概念对比

Options API (选项式API)

  • 定义：Vue 2的传统组件编写方式，通过定义不同的选项（data, methods, computed, watch等）组织代码
  • 特点：基于对象字面量结构，将逻辑分类到特定选项
  • 示例：
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ }
  },
  computed: {
    double() { return this.count * 2 }
  },
  mounted() {
    console.log('Component mounted')
  }
}

Composition API (组合式API)

  • 定义：Vue 3引入的新范式，使用导入的函数（如ref, reactive, computed）组织逻辑
  • 特点：基于函数组合，将相关逻辑组织在一起
  • 示例：
import { ref, computed, onMounted } from 'vue'

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

<script setup>语法糖

<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const increment = () => count.value++
const double = computed(() => count.value * 2)

onMounted(() => {
  console.log('Component mounted')
})
</script>

二、核心差异详解

1. 代码组织方式

特性Options APIComposition API
逻辑组织按选项类型分组按功能/逻辑关系分组
关注点分离同一功能分散在多个选项相关逻辑集中在一起
代码复用Mixins（有命名冲突风险）Composables（函数组合）
可读性简单组件清晰，复杂组件混乱复杂组件更易追踪逻辑流
学习曲线较平缓较陡峭（需理解响应式原理）

2. 响应式系统

特性Options APIComposition API
数据声明data() 函数返回对象ref() 或 reactive()
访问方式通过 this 访问直接访问变量（.value处理）
响应式原理Vue内部处理显式使用响应式API
类型推断有限TypeScript支持更好的TypeScript支持

3. 生命周期

钩子Options APIComposition API
创建前beforeCreate无直接等效项
创建后created在setup()中执行代码
挂载前beforeMountonBeforeMount
挂载后mountedonMounted
更新前beforeUpdateonBeforeUpdate
更新后updatedonUpdated
卸载前beforeUnmount (Vue3)onBeforeUnmount
卸载后unmounted (Vue3)onUnmounted

4. 逻辑复用能力对比

Options API (使用Mixins):

// counterMixin.js
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ }
  }
}

// Component.vue
import counterMixin from './counterMixin'

export default {
  mixins: [counterMixin],
  // 可能发生命名冲突和来源不清晰
}

Composition API (使用Composables):

// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  function increment() { count.value++ }
  function reset() { count.value = initialValue }
  
  return { count, increment, reset }
}

// Component.vue
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter(10)
    return { count, increment }
  }
}

三、实际应用场景对比

1. 简单计数器组件

Options API实现:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <p>Double: {{ double }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ }
  },
  computed: {
    double() { return this.count * 2 }
  }
}
</script>

Composition API实现:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <p>Double: {{ double }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const increment = () => count.value++
const double = computed(() => count.value * 2)
</script>

2. 复杂数据获取逻辑

Options API实现:

export default {
  data() {
    return {
      posts: [],
      loading: false,
      error: null
    }
  },
  methods: {
    async fetchPosts() {
      this.loading = true
      try {
        const response = await fetch('/api/posts')
        this.posts = await response.json()
      } catch (err) {
        this.error = err
      } finally {
        this.loading = false
      }
    }
  },
  mounted() {
    this.fetchPosts()
  },
  watch: {
    '$route.params.id': {
      handler() { this.fetchPosts() },
      immediate: true
    }
  }
}

Composition API实现:

import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export function usePostFetcher() {
  const posts = ref([])
  const loading = ref(false)
  const error = ref(null)
  const route = useRoute()

  async function fetchPosts() {
    loading.value = true
    try {
      const response = await fetch(`/api/posts/${route.params.id}`)
      posts.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }

  onMounted(fetchPosts)
  watch(() => route.params.id, fetchPosts)

  return { posts, loading, error, fetchPosts }
}

// 在组件中使用
import { usePostFetcher } from './composables/usePostFetcher'

const { posts, loading, error } = usePostFetcher()

四、优缺点全面分析

Options API 优势

  1. 结构清晰：对初学者友好，选项分类明确
  2. 低学习曲线：只需理解各选项作用即可开始开发
  3. this上下文：统一通过this访问所有属性和方法
  4. 向后兼容：Vue 2项目标准写法

Options API 劣势

  1. 逻辑碎片化：复杂功能代码分散在不同选项中
  2. 复用困难：Mixins存在命名冲突和来源不清晰问题
  3. 类型支持有限：TypeScript类型推断能力较弱
  4. 代码冗长：简单功能也需要完整选项结构

Composition API 优势

  1. 逻辑聚合：相关代码组织在一起，提高可维护性
  2. 强大复用：通过Composables实现干净的逻辑复用
  3. 更好TS支持：完善的类型推断和类型安全
  4. 灵活组合：自由组合各种功能，类似React Hooks
  5. 按需导入：减小最终打包体积

Composition API 劣势

  1. 学习曲线陡峭：需理解响应式原理和函数式概念
  2. .value问题：需要处理ref的.value访问
  3. 概念迁移：Options API开发者需要思维转换
  4. 过度灵活风险：缺乏结构可能导致代码混乱

五、最佳实践指南

何时选择 Options API

  1. 小型项目或简单组件
  2. Vue 2迁移项目
  3. 团队熟悉Options API且无复杂逻辑需求
  4. 需要快速原型开发的场景

何时选择 Composition API

  1. 中大型项目
  2. 需要高度复用逻辑的组件
  3. 复杂状态管理需求
  4. 使用TypeScript的项目
  5. 需要更好性能优化的场景

混合使用策略

Vue 3支持两种API在同一个项目中混合使用：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  methods: {
    // 可以访问setup返回的属性
    increment() { this.count++ }
  },
  computed: {
    // 可以访问setup返回的属性
    double() { return this.count * 2 }
  }
}

性能考量

  1. Composition API更利于Tree-shaking
  2. 两者运行时性能差异可以忽略
  3. Composition API更易实现精细更新控制
  4. 大型应用Composition API有包体积优势

六、迁移路径与工具

从Options API迁移到Composition API

  1. 渐进式迁移：

    • 在新组件中使用Composition API
    • 逐步重构复杂旧组件
    • 使用Composition API封装可复用逻辑

  2. 迁移工具：

    • 使用Vue CLI或Vite的迁移助手
    • 利用@vue/composition-api插件（Vue 2项目）

  3. 重构策略：

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

// Composition API等效
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    
    return { count, increment }
  }
}

七、总结

维度Options APIComposition API
代码组织按选项类型分组按逻辑功能分组
复用机制Mixins（有冲突风险）Composables（函数组合）
TS支持有限优秀
学习曲线平缓较陡峭
适用规模中小型项目中大型复杂项目
逻辑集中度分散集中
包大小稍大更小（Tree-shaking友好）
灵活性有限极高
维护性简单组件好，复杂组件差复杂组件更易维护
未来趋势维护状态Vue官方推荐的新标准

最终建议

  1. 新项目：优先使用Composition API（特别是<script setup>语法）
  2. 大型重构：逐步将Options API迁移到Composition API
  3. 混合项目：根据组件复杂度选择合适的API
  4. 学习路径：先掌握Options API，再学习Composition API

Vue团队推荐："对于新项目，Composition API是更好的长期投资，特别是当你的项目会增长到一定规模时。"

无论选择哪种API，理解其设计哲学和适用场景，根据团队技能和项目需求做出合理选择，才是最重要的开发实践。

avatar
文章
阅读
粉丝