Vue - 自定义Hooks

在 Vue 3 中，自定义 Hooks 是一个强大的功能，允许开发者封装和重用逻辑。

在 Vue 中它们通常通过组合式 API 实现。通过自定义 Hooks，可以将复杂的逻辑封装在一个函数中，便于在多个组件之间共享。

自定义 Hooks 是一个普通的 JavaScript 函数 / TypeScript 函数 （js 或 ts），通常以 use 开头，并且它会使用 Vue 的响应式 API，如 ref、reactive、computed、watch 等。这样就可以在各个组件中调用这些自定义 Hook，复用逻辑。

这里以 ts 为例：

第一步：创建自定义Hook

// useDog.ts

import axios from 'axios';
import { reactive } from 'vue'

const test = () => {
    const dogList = reactive([
        'https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg'
    ])

    const getDog = async () => {
        const res = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
        console.log(res.data);
        dogList.push(res.data.message);
    }
    // 向外部提供东西  任何都可
    return { dogList, getDog };
}
export default test;

// useSum.ts

import { ref } from 'vue'

const sumTest = () => {

    const sum = ref(1);

    const changeSum = () => {
        sum.value += 1;
    }

    return { sum, changeSum };
}
export default sumTest;

第二步：在组件中使用自定义Hook

// Person.vue

    

进阶用法：处理异步请求

// useFetch.ts
import { ref } from 'vue';

const useFetch = (url) => {
    const data = ref(null);
    const error = ref(null);
    const loading = ref(true);

    return { data, error, loading };
};

export default useFetch;

使用自定义 Hooks 的优点

• 逻辑复用: 可以在多个组件中共享相同的逻辑，减少重复代码。
• 清晰性: 把逻辑封装到自定义 Hooks 中，组件的可读性和维护性提高。
• 顺畅的 API: 简化组件的 API，使其更容易理解和使用。

总结：

• 自定义 Hooks 是一种封装逻辑的强大方式，可以在多个组件之间共享，并提高代码的可读性和可维护性。
• 使用 Vue 的响应式系统（ref、reactive）可以创建高度灵活的自定义 Hooks。
• 结合异步请求等具体场景，可以创建复杂的逻辑管理器。