Vue 3 Hooks进阶封装：多重实例解析与高级应用

1. 引言

Vue 3的Composition API带来了前端开发的一场变革，而Hooks机制更是成为提高代码质量和可维护性的得力工具。本文将通过更多示例，深入探讨Vue 3 Hooks的进阶封装技巧，让你能够更灵活、高效地应用于项目中。

2. 多重实例封装

2.1 useCounter - 计数器示例

import { ref } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

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

  const decrement = () => {
    count.value--;
  };

  return { count, increment, decrement };
}

2.2 useForm - 表单处理

import { ref, reactive } from 'vue';

export function useForm(initialValues) {
  const formValues = reactive(initialValues);

  const updateValue = (field, value) => {
    formValues[field] = value;
  };

  const resetForm = () => {
    Object.keys(formValues).forEach((key) => {
      formValues[key] = initialValues[key];
    });
  };

  return { formValues, updateValue, resetForm };
}

3. 高级应用示例

3.1 useIntersectionObserver - 懒加载图片

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

export function useIntersectionObserver(targetRef, options = {}) {
  const isIntersecting = ref(false);

  const observer = new IntersectionObserver(
    (entries) => {
      isIntersecting.value = entries[0].isIntersecting;
    },
    { ...options }
  );

  onMounted(() => {
    observer.observe(targetRef.value);
  });

  onUnmounted(() => {
    observer.disconnect();
  });

  return { isIntersecting };
}

3.2 useMediaQuery - 响应式媒体查询

import { ref, watchEffect } from 'vue';

export function useMediaQuery(query) {
  const isMatched = ref(window.matchMedia(query).matches);

  const updateMatched = () => {
    isMatched.value = window.matchMedia(query).matches;
  };

  watchEffect(() => {
    window.addEventListener('resize', updateMatched);
    return () => {
      window.removeEventListener('resize', updateMatched);
    };
  });

  return { isMatched };
}

4. 综合运用

通过多重实例封装和高级应用示例，你可以更好地处理组件之间的逻辑复用和复杂业务场景。以下是一个简单的示例：

import { ref, onMounted } from 'vue';
import { useCounter, useForm, useIntersectionObserver, useMediaQuery } from '@/hooks';

export default {
  setup() {
    const { count, increment, decrement } = useCounter();
    const { formValues, updateValue, resetForm } = useForm({ username: '', password: '' });
    const targetRef = ref(null);
    const { isIntersecting } = useIntersectionObserver(targetRef);
    const { isMatched } = useMediaQuery('(min-width: 768px)');

    onMounted(() => {
      // 初始化逻辑
    });

    return { count, increment, decrement, formValues, updateValue, resetForm, targetRef, isIntersecting, isMatched };
  },
};

5. 结语

Vue 3 Hooks的多重实例封装和高级应用示例为前端工程师提供了更多的创造空间。在实际项目中，通过巧妙封装，你可以更轻松地应对复杂的业务场景和提高代码的可维护性。愿你在Vue 3的世界中尽情发挥，创造更具创新性和可扩展性的前端应用。