Vue 3 Hooks基础封装技巧：打造简洁而强大的组件

在Vue 3中，Hooks提供了一种新的方式来组织和复用组件逻辑。通过合理地封装和利用Hooks，我们可以让组件代码更加简洁、可维护，并且更加强大。下面是一些基础封装技巧，帮助你更好地利用Hooks来构建Vue 3组件。

1. 创建自定义Hook

你可以创建自定义的Hook来封装特定的逻辑。自定义Hook是一个函数，它接受组件的props和context作为参数，并返回一个对象，该对象包含要在组件中使用的属性和方法。

例如，你可以创建一个名为“useCounter”的自定义Hook，用于计数器逻辑：

function useCounter(initialCount = 0) {
  const [count, setCount] = reactive(initialCount);
  const increment = () => {
    setCount(count + 1);
  };
  const decrement = () => {
    setCount(count - 1);
  };
  return { count, increment, decrement };
}

在你的组件中，可以引入并使用这个自定义Hook：

import { useCounter } from './useCounter';
export default {
  setup() {
    const { count, increment, decrement } = useCounter();
    // 在模板中使用 count、increment 和 decrement
  }
}

1. 封装复杂的逻辑到自定义Hook中

有时候，你可能需要在多个组件之间共享复杂的逻辑。在这种情况下，你可以将这个逻辑封装到一个自定义Hook中，然后在需要的地方引入和使用它。这有助于减少重复代码，并使组件更加简洁。

例如，你可以创建一个名为“useFetchData”的自定义Hook，用于处理异步数据获取：

function useFetchData() {
  const [data, setData] = reactive(null);
  const [error, setError] = reactive(null);
  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      setError(error);
    }
  };
  return { data, error, fetchData };
}

在你的组件中，可以引入并使用这个自定义Hook：

import { useFetchData } from './useFetchData';
export default {
  setup() {
    const { data, error, fetchData } = useFetchData();
    fetchData(); // 调用 Hook 中的函数获取数据
    // 在模板中使用 data 和 error 进行展示或处理错误信息等操作。
  }
}