Composition API与Options API的区别

Composition API 相比 Options API 的优点主要体现在代码的灵活性、可重用性、逻辑组织等方面，尤其是在大型项目或复杂组件中更为显著。

1. 更好的逻辑组织

在 Options API 中，组件的不同逻辑通常分散在 data、computed、methods、mounted 等不同选项中。当组件逻辑复杂或包含多个功能时，代码会分散在多个选项内，难以理清和维护。

Composition API 则允许根据功能将代码逻辑组织在一起。可以使用 setup 函数，将相关的数据、计算属性、方法和生命周期钩子放在一起，保持逻辑的连贯性和清晰性。

示例：

// Options API
export default {
    data() {
        return { count: 0 }
    },
    computed: {
        double() { return this.count * 2; }
    },
    methods: {
        increment() { this.count++; }
    }
}
 
// Composition API
import { ref, computed } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const double = computed(() => count.value * 2);
        const increment = () => { count.value++; };
        
        return { count, double, increment };
    }
}

2. 更高的代码重用性

在 Options API 中，代码重用通常依赖 mixins，但 mixins 存在数据来源不清晰、命名冲突和重用逻辑不易理解等问题。

Composition API 则可以将逻辑抽取到自定义的 composition functions（或称 composable）中，直接在多个组件中复用。composition functions 更加模块化，且可以显式导入并应用，增强了代码的可读性。

示例：

// composable.js
import { ref, computed } from 'vue';
export function useCounter() {
    const count = ref(0);
    const increment = () => { count.value++; };
    return { count, increment };
}
 
// 在不同组件中引入
import { useCounter } from './composable';
export default {
    setup() {
        const { count, increment } = useCounter();
        return { count, increment };
    }
}

3. 类型支持（尤其是 TypeScript）

Composition API 天然支持 TypeScript，通过 setup 函数和 ref、computed 等 Composition API 工具函数，能够轻松地为每个变量和函数加上类型约束。相比之下，Options API 在处理 TypeScript 时较为复杂，需要借助 Vue 的类型声明扩展。

4. 更精确的类型推断

在 Options API 中，Vue 的类型推断有时不够准确，特别是在使用 TypeScript 时。Composition API 的 setup 函数使得 Vue 能够更加精确地推断出每个变量的类型，减少了类型不匹配的错误。

5. 更轻松的优化和性能提升

Composition API 允许更细粒度地控制响应式对象和引用，在优化和性能调优时能够更加灵活。例如，ref 和 reactive 提供的响应性控制可以帮助减少不必要的渲染和依赖计算。

6. 未来的支持和生态倾斜

Vue 3 及以后的版本在 Composition API 的功能、优化和生态支持方面会更加丰富和完善，Composition API 是 Vue 官方的长期推荐，因此熟悉和使用 Composition API 将会更适应 Vue 未来的开发方向。

优点	Composition API	Options API
逻辑组织	可以按功能模块化组织代码	逻辑分散在不同选项中
代码重用性	支持创建可重用的 composable	主要依赖 mixins
类型支持	天然支持 TypeScript	TypeScript 支持较弱
性能优化	细粒度控制响应性，减少不必要的渲染	依赖响应式系统自动处理
Vue 未来支持	Vue 官方推荐，未来生态更加偏向 Composition API	Vue 2 中的传统写法

在小型项目中，两者差异可能不大，而在大型项目或复杂场景中，Composition API 的优点会更加明显。