vue3中自定义hook

在Vue3中，自定义hook其实就是一个普通的函数，该函数可以使用Vue3的响应式API和生命周期钩子。自定义hook的目的是将一些逻辑抽象出来，使组件逻辑更加清晰。

自定义hook的命名一般以"use"开头，例如"useFetch"，"useLocalStorage"等。下面是一个示例：

import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const isLoading = ref(false)
  const error = ref(null)

  onMounted(async () => {
    isLoading.value = true
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err.message
    } finally {
      isLoading.value = false
    }
  })

  return {
    data,
    isLoading,
    error
  }
}

在上面的代码中，我们定义了一个名为"useFetch"的自定义hook，它接受一个URL作为参数，并返回一个包含数据、加载状态和错误的响应式对象。在这个hook中，我们使用了Vue3的ref函数来创建响应式数据，使用onMounted钩子来在组件挂载时执行异步请求。最后，我们将数据、加载状态和错误返回给调用该hook的组件。

可以在组件中使用这个自定义hook，如下所示：

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="error">{{ error }}</div>
  <div v-else>{{ data }}</div>
</template>

<script>
import { useFetch } from './useFetch'

export default {
  setup() {
    const { data, isLoading, error } = useFetch('https://jsonplaceholder.typicode.com/todos/1')

    return {
      data,
      isLoading,
      error
    }
  }
}
</script>

在上面的代码中，我们从我们的自定义hook中导入了"data"、"isLoading"和"error"，然后将它们返回给组件。组件可以直接使用这些响应式数据，而不必担心如何处理异步请求的细节。这使得组件的代码更加简洁和易于维护。