深入理解 Vue 3 Composition API

Vue 3 Composition API 简介

Vue 3 Composition API 是 Vue.js 3 的一项重要特性，它引入了一种基于函数的组件代码组织方式，让开发者能够更灵活、更方便地管理组件代码逻辑。

相较于 Vue 2.x 中的选项式 API，Composition API 更加灵活，并且更适合处理复杂的组件逻辑。通过 Composition API，开发者可以将代码逻辑按照功能划分到不同的模块中，更好地实现代码的复用和组织。

---

面试题经常问到vue2和vue3的区别，这是vue3很重要的一个不同

---

Composition API 的基本用法

在 Vue 3 中使用 Composition API 非常简单。首先，我们需要在组件中引入 vue 模块，并通过 setup() 函数来设置组件的逻辑。

import { reactive, ref } from 'vue';

export default {
  setup() {
    // 使用 reactive() 创建响应式对象
    const state = reactive({
      count: 0
    });

    // 使用 ref() 创建响应式引用
    const message = ref('Hello, Vue 3!');

    // 返回数据和方法
    return {
      state,
      message
    };
  }
};

在上面的示例中，我们使用 reactive() 创建了一个响应式对象 state，并使用 ref() 创建了一个响应式引用 message。最后，通过 setup() 函数返回了 state 和 message，这样它们就可以在模板中使用了。

Composition API 的优势

1. 更灵活的组件逻辑管理： Composition API 允许我们将组件逻辑划分为多个功能性模块，使得代码更加清晰、易于维护。

2. 更好的代码复用： 通过将逻辑功能划分为不同的模块，我们可以更轻松地将这些模块在不同的组件中进行复用，提高了代码的复用性。

3. 更直观的代码结构： Composition API 提供了更直观的代码结构，使得我们可以更快速地理解和阅读代码。

Composition API 实例：使用计算属性

Composition API 还支持像 Vue 2.x 中那样使用计算属性。下面是一个示例，展示了如何在 Vue 3 中使用 Composition API 创建计算属性：

import { computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 创建计算属性
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount
    };
  }
};

在上面的示例中，我们使用 computed() 创建了一个计算属性 doubleCount，它的值是 count 的两倍。然后，我们将 count 和 doubleCount 返回给模板使用。