详解Vue 自定义hook 函数

当我执行Vue.js的钩子函数时，我经常感到缺少自定义钩子函数的灵活性。在某些情况下，我需要创建一些在多个组件中共享的逻辑和状态，并将这些逻辑和状态隔离到自定义hook函数中。这就是使用自定义hook函数的场景，本文将为你详细讲解如何使用Vue自定义hook函数的完整攻略。

什么是Vue自定义hook函数？

我们都知道，在Vue.js中，我们可以编写组件和使用生命周期钩子函数来监控组件上的事件。但有时，我们将写一些逻辑，这些逻辑在多个组件中都需要用到，而这样的逻辑代码写在多个组件中，不但重复而且难以维护。自定义hook函数提供了在多个组件中共享相同代码的能力。

自定义hook函数实际上是一个JavaScript函数，其中包含组件之间可重用的逻辑和状态。这样，我们就可以将逻辑和状态从组件中提取出来，重用它们，并且可以在任何组件中使用自定义hook函数

下面我们来看看如何创建一个Vue自定义hook函数

创建Vue自定义hook函数

创建Vue自定义hook函数很简单，只要将可重用的逻辑抽象到一个函数中并将其导出即可。

// useLogger.ts
import { ref, onMounted } from 'vue';

export default function useLogger(logTarget: string, message: string) {
  const count = ref(0);

  const increaseCount = () => {
    count.value++;
    console.log(`${logTarget}: ${message} count: ${count.value}`);
  };

  onMounted(() => {
    console.log(`${logTarget}: mounted!`);
  });

  return {
    increaseCount,
  };
}

在上述示例中，我们编写了一个自定义hook函数useLogger，该函数将逻辑提供了升级计数器并记录日志的能力。该函数会在挂载时输出一个消息，并提供一个increaseCount函数来增加计数并输出日志

为了在组件中使用自定义hook函数useLogger，我们需要在组件中导入该函数，然后通过调用useLogger函数来获得计数逻辑的引用，如下所示：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increaseCount">Increase</button>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const { increaseCount } = useLogger('MyCounter', 'The counter was clicked');
    const title = 'My Counter';

    return {
      increaseCount,
      title,
    };
  },
});
</script>

在组件中，我们将自定义hook函数使用useLogger导入，并调用useLogger，在挂载时输出一个消息，然后使用其返回的increaseCount函数。这些逻辑可以在组件之间共享，并且在其他组件中也可以使用同样的逻辑。

现在你已经知道如何创建和使用一个Vue自定义hook函数，下面我们来看看它的两个示例

示例：使用自定义vuehook回监听点击次数

假设有一个需求，需要在多个组件中使用一个计数器，并记录每次点击的信息和点击次数。为此，我们可以使用一个Vue自定义hook函数来抽象共享的逻辑和状态。

首先，我们先定义一个名为useClickCounter的自定义hook函数

// useClickCounter.ts
import { ref } from 'vue';

export default function useClickCounter() {
  const count = ref(0);

  const incrementClickCount = () => {
    count.value++;
    console.log(`Click count: ${count.value}`);
  };

  return { count, incrementClickCount };
}

在上述示例中，我们使用ref创建了一个名为count的响应式数据对象。同时通过定义incrementClickCount函数来增加count计数值并输出到控制台中，实现了我们需求中的逻辑

接下来我们使用自定义hook函数，来创建一个基于组件的计数器

<template>
    <div @click="incrementClickCount">{{ count }}</div>
</template>

<script>
import useClickCounter from './useClickCounter';

export default {
  setup() {
    const { count, incrementClickCount } = useClickCounter();

    return {
      count,
      incrementClickCount,
    };
  },
};
</script>

在上面组件模板中，我们使用{ count, incrementClickCount }解构出自定义hook函数useClickCounter的count变量以及incrementClickCount函数，通过@click监听Dom元素的点击事件，并调用incrementClickCount函数，在每次点击时对计数器进行累加。最后将计数器的值通过组件模板的数据绑定方式{{count}}渲染到Dom视图中

示例：使用vue自定义hook函数进行API调用

在我们的应用中，需要从API中获取数据，而请求数据的代码可能会在多个组件中使用。这又是可以使用Vue自定义hook函数的场景。首先，我们定义使用axios和Vue自定义钩子函数获取API数据的自定义hook函数，命名为useGetPost

// useGetPost.ts
import { ref } from 'vue';
import axios from 'axios';

export default function useGetPosts() {
  const posts = ref([]);

  const getPosts = async () => {
    try {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      posts.value = response.data;
    } catch (error) {
      console.log(error);
    }
  };

  return { posts, getPosts };
}

在上述示例中，我们使用了axios获取了一个jsonplaceholder的模拟数据，数据返回后赋值给我们在hook函数中定义的响应式数据对象posts。通过定义getPosts函数并使用async/await进行异步调用以确保后续代码得到正确数据

接下来，我们在多个组件中使用自定义hook函数useGetPosts来获取API数据

<template>
  <ul>
    <li v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </li>
  </ul>
</template>

<script>
import useGetPosts from './useGetPosts';

export default {
  setup() {
    const { posts, getPosts } = useGetPosts();

    getPosts();

    return {
      posts,
    };
  },
};
</script>

在上述示例中，我们使用自定义hook函数useGetPosts，获取应用程序中需要的API数据并将其添加到响应式数据对象posts中，然后将数据通过v-for来进行遍历渲染到Dom视图中。通过在组件中使用getPosts函数，对数据进行一次初始化调用，以在渲染组件的同时就可以获取数据

总结

以上就是Vue自定义hook函数完整攻略的示例说明，Vue自定义hook函数为我们提供了在多个组件之间共享逻辑和状态的能力。它使我们的代码变成可重用代码，避免重复编写代码与维护代码的问题。自定义hook函数不但可以用于处理复杂的逻辑，还可以用于优化简单应用程序的代码重用。当你需要在多个组件之间共享逻辑和状态时，请使用Vue自定义hook函数来解决这个问题。