在 Vue 3 中，由于引入了 Composition API，我们可以创建和使用自定义的 “hooks”。在 Vue 3 的语境中，这些通常被称为 “composables”。它们允许我们在组件外部封装和重用逻辑。

以下是如何创建和使用自定义 hooks（composables）的基本步骤：

1. 创建一个 Composable

创建一个文件，例如 useCounter.js，并在其中定义您的逻辑：

import { ref } from 'vue';

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

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

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

    return { count, increment, decrement };
}

2. 在组件中使用 Composable

在您的 Vue 3 组件中，您可以这样使用上面定义的 useCounter composable：

import { onMounted } from 'vue';
import useCounter from './useCounter.js';

export default {
    setup() {
        const { count, increment, decrement } = useCounter();

        onMounted(() => {
            console.log("Component is mounted!");
        });

        return { count, increment, decrement };
    }
}

3. 在模板中使用

然后，在组件的模板中，您可以直接使用 count、increment 和 decrement：

<template>
    <div>
        <button @click="decrement">-</button>
        {{ count }}
        <button @click="increment">+</button>
    </div>
</template>

以上就是如何在 Vue 3 中创建和使用自定义 hooks（或称为 composables）的基本步骤。您可以将任何复杂的逻辑、数据获取、甚至副作用封装到一个 composable 中，然后在多个组件中重用该逻辑。