当前位置： 面试刷题>> Vue 3 中的 Vue Composition API 是什么？

在Vue 3中，Vue Composition API是一项重大的更新，它为Vue开发者提供了一种更加灵活、高效的方式来组织和复用逻辑。这一API的设计旨在解决Vue 2中Options API的一些局限性，特别是当组件变得复杂时，Options API在代码的组织性和可读性上可能会面临挑战。Composition API通过允许你将相关的逻辑（如响应式状态、计算属性、方法等）封装进函数（通常称为“组合式函数”或“composables”）中，极大地提高了代码的可维护性和复用性。

Vue Composition API的核心概念

1. 响应式引用（Reactive References）

Vue 3引入了reactive和ref两个函数来创建响应式数据。reactive用于创建响应式的对象，而ref则用于创建响应式的基本数据类型（虽然内部是将基本类型包装在一个对象中）。这些响应式数据在组件的模板或计算属性中被访问时，能够自动追踪依赖并在数据变化时更新视图。

2. 组合式函数（Composables）

组合式函数是Composition API的核心，它们是普通的JavaScript函数，可以接受响应式状态、返回计算属性、执行副作用（如异步操作或监听器）等。通过将逻辑封装在函数内部，你可以在多个组件之间复用这些逻辑，而无需通过Vue的mixins或高阶组件（HOCs）来实现。

3. 生命周期钩子

在Composition API中，生命周期钩子被导入并使用，如onMounted、onUpdated等，这些钩子允许你在组件的不同生命周期阶段执行代码。它们与Options API中的mounted、updated等选项相对应，但提供了更灵活的使用方式。

4. 计算属性与侦听器（Computed & Watch）

computed函数用于创建计算属性，这些属性基于它们的响应式依赖进行缓存。watch函数则用于侦听响应式数据源的变化，并在其变化时执行副作用。这些工具在处理复杂逻辑时非常有用，尤其是在需要根据数据变化来执行异步操作或更新其他状态时。

示例代码

假设我们有一个用户信息组件，需要显示用户的姓名和年龄，并且有一个按钮可以修改用户的年龄。我们可以使用Composition API来实现这个组件。

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
    <button @click="incrementAge">Increment Age</button>
  </div>
</template>

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

export default {
  setup() {
    const user = ref({
      name: 'John Doe',
      age: 30
    });

    function incrementAge() {
      user.value.age++;
    }

    // 示例：使用onMounted生命周期钩子
    onMounted(() => {
      console.log('Component mounted, user age:', user.value.age);
    });

    // 返回给模板的响应式数据和函数
    return {
      user,
      incrementAge
    };
  }
};
</script>

在这个例子中，我们使用了ref来创建响应式的user对象，并在setup函数中定义了incrementAge函数来修改用户的年龄。我们还展示了如何使用onMounted生命周期钩子来在组件挂载后执行代码。最后，我们通过return语句将user对象和incrementAge函数暴露给模板，以便在模板中使用它们。

总结

Vue 3的Composition API为Vue开发者提供了一种更加现代、灵活的方式来构建Vue应用。通过响应式引用、组合式函数、生命周期钩子以及计算属性和侦听器等核心概念，开发者能够编写出更加清晰、可维护和可复用的代码。在码小课等学习资源中，你可以找到更多关于Vue Composition API的深入讲解和实战案例，帮助你更好地掌握这一强大的工具。

推荐面试题