当前位置：首页 > article >正文

Vue3自定义hook函数

article 2024/12/24 19:16:02

自定义Hook允许我们将组件逻辑提取到独立的函数中，从而提高代码的复用性、可读性和可维护性。通过将逻辑封装在自定义Hook中，可以在多个组件之间共享相同的逻辑，避免了代码的重复编写。同时，将逻辑分离到独立的函数中，利于代码的维护。

1.定义hook

首先，在src目录下创建一个hooks子目录，再在hooks目录中创建自定义hook的js文件。自定义hook的命名一般将use作为前缀，例如：useLogin。
下面是一个自定义hook例子：

// useCount.js
import { ref } from "vue"

export function useCount() {
  const count = ref(0)

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

  return {
    count,
    increment
  }
}

这个自定义例子中，提供了一个响应式变量count和一个修改count的函数increment，这时还需要使用return将变量和函数暴露出去，以便在其他组件中可以使用。

2.导入hook

定义了hook之后，还需要在组件中导入。

import { useCount } from '@/hooks/useCount'

3.在setup中使用hook

导入hook之后，需要在组件的setup中调用自定义hook得到它的返回值。

const {count,increment} = useCount()

在这之后，便可以在组件中使用自定义hook中的响应式变量和函数了。

4.使用hook返回的响应式数据和函数

前面已经做好了准备，下面在组件中使用自定义hook的变量和函数。

<template>
  <p>count:{{ count }}</p>
  <button @click="increment">点我</button>
</template>

<script setup>
import { useCount } from '@/hooks/useCount'

const {count,increment} = useCount()
</script>

<style lang='scss' scoped>

</style>