一，Composition API

Vue 3 引入了一种新的 API，叫做 Composition API。这是一种新的、可选的方式来组织和复用你的组件逻辑。

在 Vue 2 中，我们通常使用 Options API 来组织代码，这意味着我们需要在不同的选项（如 data、methods、computed 等）中定义我们的组件逻辑。然而，当我们的组件变得越来越复杂时，这种方式可能会导致我们的代码难以管理和理解。

Composition API 是为了解决这个问题而设计的。它允许你在一个 setup 函数中组织你的组件逻辑，这样你可以按照功能而不是选项来组织代码。这使得代码更易于阅读和维护，特别是对于复杂的组件。

以下是一个使用 Composition API 的例子：

import { ref, computed } from 'vue';

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

    return {
      count,
      increment,
      double,
    };
  },
};

在这个例子中，我们首先导入了 ref 和 computed。ref 是用来创建响应式引用的函数，computed 是用来创建计算属性的函数。

然后我们在 setup 函数中定义了我们的组件逻辑。我们创建了一个响应式引用 count，一个方法 increment，和一个计算属性 double。

最后，我们返回了这些值，这样它们就可以在组件的模板中使用了。

总的来说，Composition API 提供了一种更灵活、更具可扩展性的方式来组织和复用 Vue 组件的逻辑。

二、reactive

Vue 3 中的 reactive 是一个函数，它用于创建响应式对象。响应式对象是 Vue 3 的核心特性之一，它允许 Vue 在对象的属性发生变化时自动更新视图。reactive 函数是 Vue 3 的 Composition API 的一部分，它提供了一种更灵活、更模块化的方式来组织和复用组件逻辑。

以下是使用 reactive 的一个简单示例：

javascript复制
import { reactive } from 'vue';

const state = reactive({
  count: 0,
});

state.count++; // 当 count 值改变时，Vue 会自动更新视图

在这个例子中，我们首先从 vue 模块中导入了 reactive 函数。然后，我们创建了一个名为 state 的响应式对象，它包含一个名为 count 的属性。当 count 属性的值发生变化时，Vue 会自动更新与之相关的视图。

reactive 函数的主要优点是它可以让你轻松地创建和管理响应式状态。然而，需要注意的是，当你将响应式对象解构或传递给其他函数时，响应式对象可能会失去响应性。为了解决这个问题，你可以使用 ref 函数，它提供了一种更稳定的响应式引用。

总之，Vue 3 中的 reactive 函数是一种创建响应式对象的方法，它允许 Vue 在对象的属性发生变化时自动更新视图。reactive 是 Composition API 的一部分，它提供了一种更灵活、更模块化的方式来组织和复用组件逻辑。

三、ref

在 Vue 3 中，ref 是一个用于创建响应式数据的函数。它是 Vue 3 的 Composition API 的一部分，这是一种新的、更灵活的方式来组织和复用组件逻辑。

ref 函数接收一个参数（初始值），并返回一个响应式的引用对象。这个引用对象有一个 .value 属性，你可以通过这个属性获取或设置它的值。当你改变这个 .value 属性的值时，任何依赖于这个引用的 Vue 组件都会被重新渲染。

以下是一个使用 ref 的简单示例：

javascript复制
import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 输出 0

count.value++; // 当 count.value 改变时，任何依赖于 count 的 Vue 组件都会被重新渲染

在这个例子中，我们首先从 vue 模块中导入了 ref 函数。然后，我们创建了一个名为 count 的响应式引用，初始值为 0。我们可以通过 count.value 获取或设置 count 的值。

ref 的主要优点是它创建的响应式引用在传递和解构时保持响应性，这使得 ref 非常适合用于复杂的组件逻辑和复用性高的代码。

总的来说，ref 是 Vue 3 中创建和管理响应式数据的一种方法，它使得 Vue 能够在引用的值发生变化时自动更新视图。

vue3 Composition API

一，Composition API

二、reactive

三、ref