面试官：Vue3.0 的 Composition API 和 Vue2.x 的 Options API 有什么不同？

今天我们来聊聊面试中常见的一个问题：“Vue3.0 的 Composition API 和 Vue2.x 的 Options API 有什么不同？” 作为一个程序员，我不得不说这个问题真的考察得很有意思。

Vue的版本更新不仅仅是一些小的功能调整，背后有很多细致的思想和设计。你如果不注意，可能就会错过其中的“玄机”。那么，咱们今天就来深入剖析这两者的区别，看看到底谁更好用，谁又能在大项目中帮我们省力。

在 Vue2.x 中，我们经常会遇到以下这些困扰：

1. 组件代码膨胀：随着业务的复杂度增加，Vue组件逐渐变得难以维护。原本一个小组件，突然就像《西游记》里的取经团队一样，成了“大杂烩”。

2. 代码复用困难：虽然 Vue2 有 mixins 和 extends 等复用机制，但这些方式容易导致命名冲突，而且随着功能复杂度增加，代码的复用就像拼图一样，拼得好不容易，一碰就散。

3. TypeScript 支持有限：Vue2 使用 Options API 时，TypeScript 的支持较为有限。类型推导不准确，搞得开发人员经常“懵逼”。

Vue3 的 Composition API 正是为了解决这些问题，它从“结构”和“逻辑”上都做了优化，让我们的代码更加清晰易懂，甚至连 TypeScript 的支持都变得更加友好了。

现在，我就先简单给大家回顾一下 Vue2.x 的 Options API，顺便再讲讲 Vue3 中的 Composition API。两者的差别不只是在代码结构上，背后还涉及了设计哲学的不同。

1. Options API（Vue2.x）

Options API 是 Vue 最经典的方式了，所有的组件逻辑都会通过 data、computed、methods、watch 等选项进行组织。例如：

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

这种方式的优点是简单直观，特别适合新手入门。但是，随着项目的增大，组件中的逻辑变得越来越复杂，往往会出现以下问题：

• 逻辑分散：不同的功能被分散到 data、computed、methods 等不同的地方，维护起来很麻烦。
• 代码难以复用：假如你想复用一些逻辑，你可能会使用 mixins，但是 mixins 会导致命名冲突和不清晰的代码来源。

2. Composition API（Vue3）

而 Composition API 则改变了这种结构，把一个组件的逻辑聚合在一起，不再需要分散到不同的选项中。它通过 setup 函数来处理组件的状态和逻辑。举个例子：

import { ref, computed } from 'vue';

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

    return {
      count,
      doubledCount,
      increment
    };
  }
};

你可以看到，count、doubledCount 和 increment 都放在 setup 函数里，所有的逻辑都聚合到了一起，结构更加清晰。

3. 逻辑组织

• Options API：组件内部的逻辑会根据功能模块（data、methods、computed、watch 等）进行分块。虽然简单，但随着组件复杂度增加，这种方式就显得不够灵活了。例如，一个有多个不同功能的组件，你就不得不在不同的位置查找相关的代码，维护起来特别麻烦。

• Composition API：逻辑按功能组织。比如你要管理一个计数器，你会把所有和计数器相关的逻辑放在一起（包括 state、methods、computed）。即使组件很大，每个功能模块的代码也能清晰明了，查找和修改的时候，跳转的次数也会减少。

例如，这个 useCount 函数就很清晰地封装了计数器的相关逻辑：

function useCount() {
  const count = ref(0);
  const doubled = computed(() => count.value * 2);
  
  const increment = () => {
    count.value++;
  };

  return {
    count,
    doubled,
    increment
  };
}

4. 逻辑复用

• Options API：我们通常使用 mixin 来复用逻辑，但这也有很大的问题。当你需要复用多个功能时，mixin 会产生命名冲突，代码来源也不清晰。并且，mixins 是基于对象合并的，所以你难以处理一些更加复杂的逻辑。

• Composition API：通过自定义钩子（即 useXxx 函数）来复用逻辑。逻辑是通过函数组织的，避免了命名冲突和混乱。例如，处理 mousemove 的逻辑可以像这样重构：

import { reactive, onMounted, onUnmounted } from 'vue';

export function useMove() {
  const position = reactive({ x: 0, y: 0 });

  const handleKeyup = (e) => {
    if (e.code === 'ArrowUp') position.y--;
    if (e.code === 'ArrowDown') position.y++;
    if (e.code === 'ArrowLeft') position.x--;
    if (e.code === 'ArrowRight') position.x++;
  };

  onMounted(() => {
    window.addEventListener('keyup', handleKeyup);
  });

  onUnmounted(() => {
    window.removeEventListener('keyup', handleKeyup);
  });

  return { position };
}

在组件中使用：

<template>
  <div>Position: x {{ position.x }} / y {{ position.y }}</div>
</template>

<script>
import { useMove } from './useMove';

export default {
  setup() {
    const { position } = useMove();
    return { position };
  }
};
</script>

看得出来，逻辑的复用不仅简单，而且数据来源也变得非常清晰。

Vue3 的 Composition API 通过把相关的逻辑组织在一起，解决了 Vue2 Options API 中的代码碎片化和逻辑难以复用的问题。它让代码更高效、更清晰，特别适合大型应用和团队合作开发。用起来可能一开始有点不习惯，但一旦习惯了，你会发现开发效率和维护性都得到了极大的提升。

总的来说，Composition API 是一种更加灵活和高内聚的设计模式，而 Options API 则适合那些小而精的应用，代码更直观、易于上手。如果你对代码可维护性和复用性有高要求，Vue3 的 Composition API 绝对是你的首选。