详解Vue如何自定义hooks(组合式)函数

我很乐意为您详细讲解如何自定义Vue的组合式(Hooks)函数。

什么是Vue的组合式(Hooks)函数？

Vue的组合式函数，也称为Hooks，是一种类似于React Hooks的编程模式，可以在Vue组件中复用逻辑，并且不需要使用mixin和继承。当我们需要在多个组件之间共享逻辑时，可以使用Hooks来进行抽象，并将其作为可复用的函数进行重用。

当我们使用Hooks时，其主要实现原理是使用了Vue Composition API提供的reactive、computed、watchEffect、mounted、unmounted等API来创建可复用的逻辑代码。

如何自定义Vue的组合式(Hooks)函数？

要自定义Vue的组合式函数，我们可以先在Vue 3.x版本中创建一个单独的.js文件，并且在这个文件中定义可复用的逻辑代码。然后，我们可以将其中的一些Vue Composition API函数作为返回值输出，以便在其他组件中使用它们。下面是一个示例：

import { reactive, computed, watchEffect, onMounted, onUnmounted } from 'vue'

export const commonHooks = () => {
  // 声明state
  const state = reactive({
    count: 0
  })

  // computed计算属性
  const doubleCount = computed(() => state.count * 2)

  // watchEffect实时监测
  watchEffect(() => {
    console.log(`count is ${state.count}`)
  })

  // mounted生命周期
  onMounted(() => {
    console.log(`mounted invoked`)
  })

  // unmounted生命周期
  onUnmounted(() => {
    console.log(`unmounted invoked`)
  })

  // 将state、doubleCount、watchEffect、mounted、unmounted作为输出结果
  return {
    state,
    doubleCount,
    watchEffect,
    onMounted,
    onUnmounted
  }
}

在上面的示例中，我们创建了一个名为commonHooks的函数，并将reactive、computed、watchEffect、onMounted、onUnmounted这些API作为返回值输出。然后，在其他组件中我们可以引用这个函数并使用它返回的这些API。下面是一个示例：

<template>
  <div>
    <span>count: {{ state.count }}</span>
    <span>double count: {{ doubleCount }}</span>
  </div>
</template>

<script>
import { commonHooks } from './common-hooks'

export default {
  setup() {
    const { state, doubleCount } = commonHooks()

    // 点击按钮执行
    const handleClick = () => {
      state.count++
    }

    return {
      state,
      doubleCount,
      handleClick
    }
  }
}
</script>

在这个组件中，我们引用了commonHooks函数，并使用它返回的state和doubleCount数据以及handleClick函数。

示例说明

下面给出两个示例，分别说明如何自定义两个常见的组合式函数。

useFetch

useFetch函数可以用于处理组件中获取数据的逻辑，并将获取到的数据以及是否处于加载状态作为返回值输出。下面是一个示例：

import { reactive, watchEffect } from 'vue'

export const useFetch = (url) => {
  const state = reactive({
    data: null,
    isLoading: false,
    error: null
  })

  watchEffect(() => {
    state.isLoading = true
    fetch(url)
      .then(res => res.json())
      .then(data => {
        state.data = data
      })
      .catch(err => {
        state.error = err
      })
      .finally(() => {
        state.isLoading = false
      })
  })

  return state
}

在这个示例中，我们定义了一个名为useFetch的函数，并将接口URL作为参数传入。函数中使用reactive实现了一个包含数据、加载状态以及错误信息的状态对象。然后在函数中使用了watchEffect监听数据变化，并且在发起请求前设置isLoading为true，在请求结束后将isLoading设置为false。

在其他组件中，我们可以引用这个函数并获取到返回的状态对象以及状态更新逻辑。下面是一个示例：

<template>
  <div>
    <div v-if="isLoading">loading...</div>
    <div v-if="error">{{ error }}</div>
    <ul>
      <li v-for="(item, index) in data" :key="index">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import { useFetch } from './use-fetch'

export default {
  setup() {
    const state = useFetch('https://jsonplaceholder.typicode.com/posts')

    return state
  }
}
</script>

在这个组件中，我们引用了useFetch函数，并将接口URL传入函数中。然后在模板中使用isLoading判断是否处于加载状态，使用error来渲染错误信息，使用v-for来渲染获取到的数据列表。

useState

useState函数可以用于处理组件中的逻辑状态，并将状态数据、状态更新函数以及计算属性输出为返回值。下面是一个示例：

import { reactive, computed } from 'vue'

export const useState = () => {
  const state = reactive({
    count: 0
  })

  const increment = () => {
    state.count++
  }

  const doubleCount = computed(() => state.count * 2)

  return {
    count: state.count,
    increment,
    doubleCount
  }
}

这个示例中，我们定义了一个名为useState的函数，并使用reactive实现了一个包含计数器数据的状态对象。然后，我们定义了一个名为increment的函数，并将其添加到了状态对象中作为状态更新函数；使用computed函数计算了计数器的二倍值，并将其添加到状态对象中作为计算属性。

在其他组件中，我们可以引用这个函数并获取返回的状态对象和状态更新逻辑。下面是一个示例：

<template>
  <div>
    <span>count: {{ count }}</span>
    <span>double count: {{ doubleCount }}</span>
    <button @click="increment">++</button>
  </div>
</template>

<script>
import { useState } from './use-state'

export default {
  setup() {
    const { count, increment, doubleCount } = useState()

    return {
      count,
      increment,
      doubleCount
    }
  }
}
</script>

在这个组件中，我们引用了useState函数，并将其输出的状态对象包含的数据、函数以及计算属性解构到组件中。在模板中使用count渲染计数器的值，使用doubleCount渲染计数器的二倍值，并且使用increment函数来实现状态更新逻辑。