vue3自定义hook

Vue 3中可以通过自定义钩子来扩展和重用组件逻辑。以下是创建自定义钩子的步骤：

1. 创建一个函数，该函数将作为自定义钩子的入口。可以将其放在一个单独的文件中，以便在多个组件中共享。

2. 在函数中定义你的逻辑。这可以包括任何你需要在组件中重复使用的代码，如数据处理、异步请求、订阅等。

3. 返回一个对象，该对象包含你想要暴露给组件使用的属性和方法。这些属性和方法可以在组件中通过解构赋值的方式进行使用。

下面是一个简单的例子，展示了如何创建一个名为'useDarkMode'的自定义钩子，用于在组件中添加暗黑模式功能：

// useDarkMode.js

import { ref, watch } from 'vue';

export default function useDarkMode() {
  const isDarkMode = ref(false);

  // 监听isDarkMode的变化，当其值改变时执行回调函数
 watch(isDarkMode, (newValue) => {
    // 在这里可以根据newValue的值来切换暗黑模式样式
    // 例如，切换一个CSS class或者调用其他相关逻辑
    document.body.classList.toggle('dark-mode', newValue);
  });

  // 提供一个方法来切换暗黑模式的状态
  function toggleDarkMode() {
    isDarkMode.value = !isDarkMode.value;
  }

  // 返回需要暴露给组件的属性和方法
  return {
    isDarkMode,
    toggleDarkMode,
  };
}

然后，在你的组件中可以使用这个自定义钩子：

// MyComponent.vue

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

export default {
  setup() {
    const { isDarkMode, toggleDarkMode } = useDarkMode();

    return {
      isDarkMode,
      toggleDarkMode,
    };
  },
};
</script>

<template>
  <div>
    <button @click="toggleDarkMode">{{ isDarkMode ? '关闭' : '开启' }}暗黑模式</button>
    <p v-if="isDarkMode">当前处于暗黑模式</p>
    <p v-else>当前处于亮色模式</p>
  </div>
</template>

这样，你就可以在多个组件中重复使用`useDarkMode`钩子，从而实现暗黑模式的切换。