vue3.0所采用得Composition Api与Vue2.XOtions Api有什么不同？

Vue 3.0 引入的 Composition API 相较于 Vue 2.x 的 Options API 有显著的不同。下面从几个方面对比这两者的差异：

✅ 1. 代码组织方式不同

Vue 2.x — Options API

• 使用 data、methods、computed、watch 等分散的选项组织逻辑。

• 每个功能点分散在不同的选项中，可能导致大型组件难以维护。

export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

Vue 3.x — Composition API

• 使用 setup() 函数将相关逻辑聚合在一起，逻辑关注点清晰、复用性更强。

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    const increment = () => count.value++;

    return { count, doubleCount, increment };
  }
};

✅ 2. 代码复用方式不同

Vue 2.x — Options API

• 主要通过 mixins 实现代码复用，但可能会产生命名冲突、不易追踪来源。

Vue 3.x — Composition API

• 使用 自定义 hooks（composables） 复用逻辑，清晰、解耦、强类型支持好。

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

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

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

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

✅ 3. 类型支持

• Composition API 更加友好地支持 TypeScript，因为它依赖函数和变量声明，而不是框架“魔法”。

• Options API 在类型推导方面较弱。

✅ 4. this 关键字使用

• Options API 中大量使用 this，容易引发作用域混淆和错误。

• Composition API 中避免使用 this，一切显式定义，作用域清晰。

✅ 5. 生命周期钩子写法不同

import { onMounted } from 'vue';

setup() {
  onMounted(() => {
    console.log('组件已挂载');
  });
}

✅ 6. 性能

• Composition API 在 逻辑复用、类型推导、Tree-shaking 上更具优势。

• Vue 3 在底层用 Proxy 替代 Object.defineProperty，性能本身也有提升。

✅ 总结对比表：

如果你是在大型项目、希望更好地复用逻辑或使用 TypeScript，Composition API 更合适；如果是小型项目或团队熟悉 Options API，也可继续使用，Vue 3 仍然支持它。