vue3 组合式函数

Vue 3中引入了一种新的组织代码的方式，即组合式函数。组合式函数是一种将逻辑相关的代码组织在一起的方式，以提高代码的可读性和可维护性。它通过将相关的逻辑封装在一个函数中，并将该函数作为一个可复用的组合式函数提供给组件使用。

在Vue 3中，组合式函数使用`setup`函数来定义。`setup`函数是在组件实例创建之前执行的，它接收两个参数：`props`和`context`。`props`是组件的属性，可以在`setup`函数中直接使用；`context`是一个包含了一些实用方法和属性的对象，例如`attrs`、`emit`等。

组合式函数可以使用Vue提供的一些API来实现不同的功能，例如：
1. `reactive`：用于创建响应式数据。
2. `computed`：用于创建计算属性。
3. `watch`：用于监听数据的变化。
4. `ref`：用于创建一个包装对象，使其可以被响应式地访问。
5. `toRefs`：用于将响应式对象转换为普通对象，以便在模板中使用。

通过使用这些API，我们可以将相关的逻辑封装在一个组合式函数中，并在组件中使用。这样可以提高代码的可读性和可维护性，并且可以更好地复用逻辑。