面试题：Vue 3 中的 Vue Composition API 是什么？

Vue Composition API 是什么？

Vue Composition API 是 Vue 3 中引入的一种新的编写组件逻辑的方式。它提供了一组基于函数的 API，允许开发者更灵活地组织和复用代码逻辑，尤其是在处理复杂组件时。

与 Vue 2 的 Options API（如 data、methods、computed 等选项）不同，Composition API 将组件的逻辑拆分为更小的、可复用的函数，而不是分散在不同的选项中。

Composition API 的核心概念

1. `setup` 函数

setup 是 Composition API 的入口函数，在组件创建之前执行。
它接收两个参数：
- props：组件的 props。
- context：包含 attrs、slots 和 emit 的对象。
在 setup 中定义的变量和函数需要显式返回，才能在模板中使用。

示例：


export default {
  setup(props, context) {
    const message = 'Hello, Composition API!';
    return {
      message,
    };
  },
};
export default {
  setup(props, context) {
    const message = 'Hello, Composition API!';
    return {
      message,
    };
  },
};
export default {
  setup(props, context) {
    const message = 'Hello, Composition API!';
    return {
      message,
    };
  },
};

2. 响应式数据

ref：
- 用于定义基本类型的响应式数据。通过 .value 访问和修改数据。
reactive：
- 用于定义对象类型的响应式数据。直接访问和修改数据。

3. 计算属性

使用 computed 定义计算属性。


import { ref, computed } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    return {
      count,
      doubleCount,
    };
  },
};
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    return {
      count,
      doubleCount,
    };
  },
};
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    return {
      count,
      doubleCount,
    };
  },
};

4. 侦听器

使用 watch 或 watchEffect 监听数据变化。


import { ref, watch } from 'vue';
export default {
  setup() {
    const count = ref(0);
    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });
    return {
      count,
    };
  },
};
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });
    return {
      count,
    };
  },
};
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });
    return {
      count,
    };
  },
};

5. 生命周期钩子

Composition API 提供了与 Options API 对应的生命周期钩子函数，如 onMounted、onUpdated、onUnmounted 等。


import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!');
    });
  },
};
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!');
    });
  },
};
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!');
    });
  },
};

6. 复用逻辑

Composition API 的核心优势之一是能够将逻辑提取到独立的函数中，实现逻辑复用。


// useCounter.js
import { ref } from 'vue';
export function useCounter() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  return {
    count,
    increment,
  };
}
// Component.vue
import { useCounter } from './useCounter';
export default {
  setup() {
    const { count, increment } = useCounter();
    return {
      count,
      increment,
    };
  },
};
// useCounter.js
import { ref } from 'vue';

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

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

export default {
  setup() {
    const { count, increment } = useCounter();
    return {
      count,
      increment,
    };
  },
};
// useCounter.js
import { ref } from 'vue';

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

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

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

Composition API 的优点

更好的代码组织：
- 将相关逻辑组织在一起，而不是分散在 data、methods、computed 等选项中。
逻辑复用：
- 通过自定义 Hook 函数，可以轻松复用逻辑。
更好的 TypeScript 支持：
- Composition API 基于函数，天然支持 TypeScript，类型推断更加友好。
更灵活的代码结构：
- 可以根据功能拆分逻辑，而不是局限于组件的生命周期。

Composition API 的适用场景

复杂组件：
- 在逻辑复杂的组件中，Composition API 可以更好地组织代码。
逻辑复用：
- 当多个组件需要共享相同逻辑时，可以使用 Composition API 提取逻辑。
TypeScript 项目：
- Composition API 对 TypeScript 的支持更好，适合 TypeScript 项目。

Composition API 与 Options API 的对比

特性	Composition API	Options API
代码组织	按功能组织逻辑	按选项组织逻辑
逻辑复用	通过自定义 Hook 函数复用	通过 Mixin 或高阶组件复用
TypeScript 支持	更好	较弱
学习曲线	较高	较低
适用场景	复杂组件、逻辑复用、TypeScript	简单组件、快速开发

示例：使用 Composition API 实现计数器


<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment,
    };
  },
};
</script>
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment,
    };
  },
};
</script>
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

总结

Composition API 是 Vue 3 中引入的一种新的编写组件逻辑的方式。
核心功能：
- setup 函数。
- 响应式数据（ref 和 reactive）。
- 计算属性（computed）。
- 侦听器（watch 和 watchEffect）。
- 生命周期钩子（如 onMounted）。
优点：
- 更好的代码组织。
- 逻辑复用。
- 更好的 TypeScript 支持。
适用场景：
- 复杂组件。
- 逻辑复用。
- TypeScript 项目。