Composition API与Options API对比

Composition API与Options API对比

Vue.js提供了两种编写组件逻辑的方式：Options API和Composition API。Options API是Vue 2.x及早期版本的主要编程范式，而Composition API则是Vue 3.x引入的新特性。两者各有特点，适用于不同的开发场景和编程风格。

Options API的基本结构

Options API通过定义不同的选项对象来组织代码，包括data、methods、computed、watch等选项：

// Options API示例
export default {
  data() {
    return {
      count: 0,
      message: 'Hello Vue!'
    }
  },
  methods: {
    increment() {
      this.count++
    },
    showMessage() {
      alert(this.message)
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}

这种组织方式将相同功能的代码分散在不同的选项中，对于小型组件来说清晰直观。但随着组件复杂度增加，相关逻辑会分散在多个选项中，导致代码难以维护。

Composition API的基本结构

Composition API使用setup函数作为组件入口，通过导入和调用各种函数来组织代码：

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

export default {
  setup() {
    const count = ref(0)
    const message = ref('Hello Vue!')
    
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    function showMessage() {
      alert(message.value)
    }
    
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    })
    
    onMounted(() => {
      console.log('Component mounted')
    })
    
    return {
      count,
      message,
      doubleCount,
      increment,
      showMessage
    }
  }
}

Composition API将相关逻辑集中在一起，通过函数组合的方式构建组件逻辑，更适合复杂组件的组织和复用。

逻辑复用对比

Options API主要通过mixins实现逻辑复用：

// Options API的mixin示例
const counterMixin = {
  data() {
    return {
      mixinCount: 0
    }
  },
  methods: {
    mixinIncrement() {
      this.mixinCount++
    }
  }
}

export default {
  mixins: [counterMixin],
  // 其他选项...
}

mixins存在命名冲突、来源不清晰等问题。Composition API通过自定义hook函数实现更灵活的逻辑复用：

// Composition API的自定义hook
import { ref } from 'vue'

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

// 在组件中使用
import { useCounter } from './hooks/useCounter'

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

自定义hook可以明确知道功能的来源，避免命名冲突，并且可以传递参数进行定制。

TypeScript支持

Composition API对TypeScript的支持更加友好：

// Composition API + TypeScript
import { ref } from 'vue'

interface User {
  name: string
  age: number
}

export default {
  setup() {
    const user = ref<User>({
      name: 'Alice',
      age: 25
    })
    
    function updateUser(newUser: Partial<User>) {
      user.value = { ...user.value, ...newUser }
    }
    
    return {
      user,
      updateUser
    }
  }
}

相比之下，Options API的TypeScript支持需要额外的类型声明：

// Options API + TypeScript
import { defineComponent } from 'vue'

interface User {
  name: string
  age: number
}

export default defineComponent({
  data() {
    return {
      user: {
        name: 'Alice',
        age: 25
      } as User
    }
  },
  methods: {
    updateUser(newUser: Partial<User>) {
      this.user = { ...this.user, ...newUser }
    }
  }
})

响应式数据声明

Options API使用data选项声明响应式数据：

export default {
  data() {
    return {
      user: {
        name: 'Alice',
        age: 25
      },
      items: []
    }
  }
}

Composition API使用ref或reactive：

import { ref, reactive } from 'vue'

export default {
  setup() {
    const user = reactive({
      name: 'Alice',
      age: 25
    })
    
    const items = ref([])
    
    return {
      user,
      items
    }
  }
}

ref用于基本类型和对象引用，reactive用于复杂对象。Composition API的响应式系统更加灵活，可以独立于组件创建响应式状态。

生命周期钩子

Options API的生命周期钩子作为选项直接定义：

export default {
  created() {
    console.log('Component created')
  },
  mounted() {
    console.log('Component mounted')
  },
  beforeUnmount() {
    console.log('Component will unmount')
  }
}

Composition API使用对应的函数：

import { onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted')
    })
    
    onBeforeUnmount(() => {
      console.log('Component will unmount')
    })
  }
}

Composition API的生命周期函数可以在setup中多次调用，并且可以放在条件语句中，更加灵活。

代码组织方式

Options API强制按照选项类型组织代码：

- data
- methods
- computed
- watch
- lifecycle hooks

这种组织方式在简单组件中很直观，但在复杂组件中，相关逻辑会被分散到不同选项中。

Composition API允许按照功能组织代码：

- 功能A
  - 数据
  - 方法
  - 计算属性
  - 监听器
- 功能B
  - 数据
  - 方法
  - 计算属性
  - 监听器

这种组织方式使得相关代码保持在一起，便于维护和理解。

性能考虑

在性能方面，Composition API有一些优势：

1. 更好的Tree-shaking支持：Composition API的函数可以单独导入，未使用的功能可以被正确摇树优化
2. 更少的内存开销：Composition API不需要维护Options API中的this上下文
3. 更高效的响应式系统：Vue 3的响应式系统在Composition API下工作得更好

学习曲线

Options API的学习曲线相对平缓，因为它：

• 有明确的代码组织规则
• 概念较少，容易理解
• 与传统的面向对象编程模式相似

Composition API需要理解更多的概念：

• ref和reactive的区别
• 响应式原理
• 函数式编程思想
• 自定义hook的创建和使用

适用场景

Options API适合：

• 小型到中型项目
• 需要快速上手的团队
• 简单的UI组件
• Vue 2.x项目

Composition API适合：

• 大型复杂应用
• 需要高度复用的逻辑
• TypeScript项目
• 需要更好代码组织的场景
• Vue 3.x项目

迁移策略

从Options API迁移到Composition API可以逐步进行：

1. 在新组件中使用Composition API
2. 逐步重构复杂组件
3. 将重复逻辑提取为自定义hook
4. 保持Options API组件与Composition API组件共存

Vue 3完全支持两种API风格，因此迁移不必一次性完成。