博客站

在 Vue 3 中，自定义 Hook 是一种将逻辑代码封装成可复用函数的方式。通过自定义 Hook，你可以将组件的逻辑代码抽离出来，使其更易于维护和复用。以下是如何在组件中使用自定义 Hook 的详细步骤和示例：

1. 创建自定义 Hook

首先，创建一个自定义 Hook。自定义 Hook 是一个普通的 JavaScript 函数，通常以 use 开头命名。在函数内部，你可以使用 Vue 的组合式 API 来封装逻辑。

// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));

  return { x, y };
}

2. 在组件中使用自定义 Hook

在组件中，你可以像使用普通函数一样使用自定义 Hook。自定义 Hook 返回的响应式数据和方法可以直接在模板中使用。

<template>
  <div>
    <p>Mouse position: {{ x }}, {{ y }}</p>
  </div>
</template>

<script>
import { useMousePosition } from './useMousePosition';

export default {
  setup() {
    const { x, y } = useMousePosition();

    return {
      x,
      y
    };
  }
};
</script>

3. 在 <script setup> 语法中使用自定义 Hook

如果你使用 <script setup> 语法，可以更简洁地使用自定义 Hook。

<template>
  <div>
    <p>Mouse position: {{ x }}, {{ y }}</p>
  </div>
</template>

<script setup>
import { useMousePosition } from './useMousePosition';

const { x, y } = useMousePosition();
</script>

4. 封装带有参数的自定义 Hook

自定义 Hook 可以接收参数，以便根据不同的需求进行定制。

// useDebouncedRef.js
import { ref, watch } from 'vue';

export function useDebouncedRef(value, delay = 200) {
  const debouncedValue = ref(value);

  let timeout;
  watch(() => value, (newValue) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      debouncedValue.value = newValue;
    }, delay);
  });

  return debouncedValue;
}

5. 在组件中使用带有参数的自定义 Hook

在组件中，你可以传入参数来使用自定义 Hook。

<template>
  <div>
    <input v-model="text" />
    <p>Debounced value: {{ debouncedText }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useDebouncedRef } from './useDebouncedRef';

export default {
  setup() {
    const text = ref('');
    const debouncedText = useDebouncedRef(text, 500);

    return {
      text,
      debouncedText
    };
  }
};
</script>

6. 在 <script setup> 语法中使用带有参数的自定义 Hook

在 <script setup> 语法中，使用带有参数的自定义 Hook 也非常简洁。

<template>
  <div>
    <input v-model="text" />
    <p>Debounced value: {{ debouncedText }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useDebouncedRef } from './useDebouncedRef';

const text = ref('');
const debouncedText = useDebouncedRef(text, 500);
</script>

7. 封装复杂的自定义 Hook

自定义 Hook 可以封装复杂的逻辑，甚至可以组合多个 Hook 来实现更复杂的功能。

// useWindowSize.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useWindowSize() {
  const width = ref(window.innerWidth);
  const height = ref(window.innerHeight);

  function update() {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }

  onMounted(() => window.addEventListener('resize', update));
  onUnmounted(() => window.removeEventListener('resize', update));

  return { width, height };
}

8. 在组件中使用复杂的自定义 Hook

在组件中，你可以使用复杂的自定义 Hook 来管理窗口大小。

<template>
  <div>
    <p>Window size: {{ width }} x {{ height }}</p>
  </div>
</template>

<script>
import { useWindowSize } from './useWindowSize';

export default {
  setup() {
    const { width, height } = useWindowSize();

    return {
      width,
      height
    };
  }
};
</script>

9. 在 <script setup> 语法中使用复杂的自定义 Hook

在 <script setup> 语法中，使用复杂的自定义 Hook 也非常简洁。

<template>
  <div>
    <p>Window size: {{ width }} x {{ height }}</p>
  </div>
</template>

<script setup>
import { useWindowSize } from './useWindowSize';

const { width, height } = useWindowSize();
</script>

总结

• 自定义 Hook 是一种将逻辑代码封装成可复用函数的方式，通常以 use 开头命名。
• 自定义 Hook 可以使用 Vue 的组合式 API 中的 ref、reactive、computed、watch 等函数来实现。
• 自定义 Hook 可以接收参数，以便根据不同的需求进行定制。
• 在组件中，你可以像使用普通函数一样使用自定义 Hook，返回的响应式数据和方法可以直接在模板中使用。
• 在 <script setup> 语法中，使用自定义 Hook 更加简洁。
• 通过自定义 Hook，你可以将组件的逻辑代码抽离出来，使其更易于维护和复用。