示例一：使用fetch

在Vue 3中，我们可以使用Composition API来封装自定义的Hooks。这些Hooks是可以被多个组件复用的逻辑代码块，可以提供更好的代码组织和代码重用。下面是一个简单的示例，展示如何封装一个名为useFetch的自定义Hook，用于处理数据获取的逻辑：

import { ref, onMounted } from 'vue';export function useFetch(url) {const data = ref(null);const loading = ref(false);const error = ref(null);onMounted(async () => {loading.value = true;try {const response = await fetch(url);data.value = await response.json();} catch (err) {error.value = err.message;} finally {loading.value = false;}});return {data,loading,error};
}

上述代码中，我们使用ref函数创建了data、loading和error三个响应式状态变量，并在onMounted钩子中执行实际的数据获取逻辑。当数据正在加载时，loading会变为true，并在数据加载完成或出错后恢复为false。获取到的数据存储在data中，任何错误都会存储在error中。然后，我们可以在组件中使用这个自定义的Hook：

import { useFetch } from './useFetch';export default {setup() {const { data, loading, error }</