【vue3 组合式函数】

组合式函数是什么

Vue3 的组合式函数是一种新的编程模式，通过将逻辑拆分成独立的函数，以提高代码的可重用性和可维护性。
组合式函数是一种基于函数式编程思想的抽象，将逻辑组合成组件逻辑的可组合单元。
Vue3 的组合式函数与 React Hooks 有相似之处，但是它们的实现和用法有所不同。相比于 Vue2.x 的 mixins 和高阶组件，组合式函数更灵活、更易于维护和测试。
在 Vue3 中，可以使用 setup 函数创建组合式函数，这个函数可以返回一个对象，供组件模板使用。
组合式函数可以在不增加额外状态或副作用的情况下，轻松复用逻辑代码，并且允许在多个组件之间共享。

如何定义与如何使用

Vue3的组合式函数可以通过以下步骤进行编写：

1. 导入ref、reactive等需要使用的函数或对象。
2. 编写需要被组合的逻辑代码，例如数据处理、异步请求等。
3. 将这些逻辑代码封装在一个函数中，并返回一个包含需要使用的数据和方法的对象。
4. 在需要使用这些逻辑代码的组件中，使用setup函数来导入组合式函数并进行调用。

以下是一个示例代码，展示了如何编写一个组合式函数：

import { ref } from 'vue'

// 定义需要被组合的逻辑代码
function fetchData() {
  const data = ref(null)
  const loading = ref(false)

  const loadData = async () => {
    loading.value = true

    // 发送异步请求
    const res = await fetch('https://api.example.com/data')
    data.value = await res.json()

    loading.value = false
  }

  return {
    data,
    loading,
    loadData
  }
}

export default fetchData

在组件中导入并调用该组合式函数：

<template>
  <div>
    <button @click="loadData">Load Data</button>
    <p v-if="loading">Loading...</p>
    <p v-else-if="data">{{ data }}</p>
    <p v-else>No data</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import fetchData from './fetchData'

export default defineComponent({
  setup() {
    const { data, loading, loadData } = fetchData()

    return {
      data,
      loading,
      loadData
    }
  }
})
</script>

上述代码中，fetchData函数负责发送异步请求、处理数据等逻辑，被封装在一个函数中并返回了一个包含数据和方法的对象。在组件中，可以通过调用fetchData函数来使用这些逻辑代码，并将其返回的数据和方法导入到setup函数中使用。

需要注意的地方

在使用Vue3的组合式函数时，需要注意以下几点：

1. 组合式函数必须在setup()函数中使用，并且返回一个对象。
2. 在组合式函数中，可以使用元素属性、响应式属性、计算属性、方法等Vue3常用的属性和方法。
3. 组合式函数中可以使用ref()、reactive()和computed()等Vue3的响应式API。
4. 组合式函数中可以使用watch()函数来监听数据的变化。

常见的Vue3组合式函数的Bug

1. 在setup()函数中使用的响应式数据必须使用reactive()或ref()进行包装，否则无法响应式更新。
2. 在组合式函数中调用异步函数时，需要使用async/await关键字来保证异步函数执行完毕后再执行后续的操作。
3. 在组合式函数中使用watch()函数时，需要注意watch()函数中的回调函数中的第一个参数是新值，第二个参数是旧值。
4. 在组合式函数中使用computed()函数时，需要注意computed()函数中的回调函数中需要返回一个值，否则无法正常工作。