vue3中自定义hook函数

在Vue 3中，你可以使用Composition API来创建自定义的Hook函数。Composition API允许你将逻辑组织在可重用的函数中，并在组件中进行使用。下面是一个简单的例子：

假设你想要创建一个自定义的Hook函数，用来处理页面标题的逻辑。

import { ref, onMounted, onUnmounted } from 'vue';

// 自定义 Hook 函数
export function usePageTitle(title) {
  const originalTitle = document.title;
  const pageTitle = ref(title);

  // 设置页面标题
  const setPageTitle = (newTitle) => {
    document.title = newTitle;
    pageTitle.value = newTitle;
  };

  // 恢复原始页面标题
  const restorePageTitle = () => {
    document.title = originalTitle;
    pageTitle.value = originalTitle;
  };

  // 在组件挂载时设置页面标题
  onMounted(() => {
    setPageTitle(title);
  });

  // 在组件卸载时恢复原始页面标题
  onUnmounted(() => {
    restorePageTitle();
  });

  // 返回相关方法和数据
  return {
    pageTitle,
    setPageTitle,
    restorePageTitle,
  };
}

然后，你可以在你的Vue组件中使用这个自定义的Hook函数：

<template>
  <div>
    <h1>{{ pageTitle }}</h1>
    <button @click="changeTitle">Change Title</button>
  </div>
</template>

<script>
import { usePageTitle } from './usePageTitle'; // 引入自定义的 Hook

export default {
  setup() {
    const { pageTitle, setPageTitle } = usePageTitle('Original Title'); // 使用自定义 Hook

    const changeTitle = () => {
      setPageTitle('New Title');
    };

    return {
      pageTitle,
      changeTitle,
    };
  },
};
</script>

这是一个简单的例子，展示了如何使用Vue 3的Composition API创建一个自定义的Hook函数，并在组件中使用它来管理页面标题。自定义Hook函数可以包含各种逻辑和功能，让你更好地组织和重用代码。