Vue 3 Hooks封装技巧大揭秘：让你的组件更简洁更强大！

Vue 3 引入的 Composition API 带来了强大的功能，其中的 Hooks 使得组件逻辑更加清晰、可复用。本文将分享一些Vue 3 Hooks封装的技巧，让你的组件更具可读性、可维护性，并提升开发效率。

1. 使用ref和reactive进行状态管理

Vue 3中的ref和reactive能够更灵活地处理组件的状态。使用ref来创建响应式变量，而reactive可用于处理复杂的对象状态。

import { ref, reactive } from 'vue';

// ref示例
const count = ref(0);

// reactive示例
const state = reactive({
  username: 'John Doe',
  age: 25,
});

2. 自定义Hooks实现逻辑复用

通过自定义Hooks，可以将组件中的逻辑提取出来，使其更易于重用。以下是一个简单的例子，用于处理页面加载前后的loading状态。

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

function useLoading() {
  const isLoading = ref(true);

  const startLoading = () => {
    isLoading.value = true;
  };

  const finishLoading = () => {
    isLoading.value = false;
  };

  // 在组件挂载后开始loading，在组件销毁前结束loading
  onMounted(() => {
    startLoading();
  });

  onBeforeUnmount(() => {
    finishLoading();
  });

  return {
    isLoading,
    startLoading,
    finishLoading,
  };
}

3. 使用watchEffect监听副作用

watchEffect是Vue 3引入的全新API，用于监听副作用，可以轻松处理响应式依赖。以下是一个例子，监听用户输入实时搜索。

import { ref, watchEffect } from 'vue';

function useRealTimeSearch(searchTerm) {
  const results = ref([]);

  watchEffect(() => {
    // 发送搜索请求并更新结果
    fetchResultsFromAPI(searchTerm.value).then((data) => {
      results.value = data;
    });
  });

  return {
    results,
  };
}

4. 合理使用watch处理依赖变化

watch可以用于监听特定变量的变化，并在变化时执行相应的操作。这在处理需要依赖变化时进行异步操作时非常有用。

import { ref, watch } from 'vue';

function useAsyncOperation(dependency) {
  const result = ref(null);

  watch(dependency, async (newVal) => {
    // 异步操作
    result.value = await fetchData(newVal);
  });

  return {
    result,
  };
}

结语

通过这些Vue 3 Hooks封装技巧，你可以更好地组织你的组件逻辑，使其更加清晰、易于维护。合理使用Composition API提供的工具，将代码拆分成可重用的部分，让你的Vue应用更加灵活、高效！