高階組件是一種常用的組件復(fù)用方式，在Vue中我們可以使用Mixin來(lái)實(shí)現(xiàn)高階組件。Mixin是一種分離可復(fù)用功能的方式，可以將可復(fù)用的功能提取出來(lái)，再通過(guò)代碼注入的方式讓組件使用。而在Vue3中，我們可以使用Composition API來(lái)實(shí)現(xiàn)高階組件。

Composition API是Vue3中新增的API，它可以讓我們更加靈活地組合邏輯代碼，從而更好地實(shí)現(xiàn)可復(fù)用性。在Composition API中，一個(gè)組件的邏輯代碼可以被分離成多個(gè)小的函數(shù)，然后通過(guò)組合這些函數(shù)的方式來(lái)實(shí)現(xiàn)邏輯的復(fù)用。

const useFetch = (url) =>{
const articles = ref([]);
const isLoading = ref(false);
const fetchArticles = async () =>{
isLoading.value = true;
const res = await fetch(url);
articles.value = await res.json();
isLoading.value = false;
};
return { articles, isLoading, fetchArticles };
};

上面的代碼是一個(gè)簡(jiǎn)單的useFetch函數(shù)，它接收一個(gè)url參數(shù)，在組件中調(diào)用該函數(shù)后，即可獲取到articles、isLoading、fetchArticles三個(gè)值。通過(guò)這種方式，我們可以將復(fù)雜的邏輯代碼轉(zhuǎn)化為可復(fù)用的函數(shù)，從而實(shí)現(xiàn)更高效的代碼復(fù)用。

import { defineComponent } from 'vue';
import useFetch from './useFetch';
const WithFetch = (url) =>(component) =>{
return defineComponent({
name: `WithFetch${component.name}`,
setup() {
const { articles, isLoading, fetchArticles } = useFetch(url.value);
return () =>{
return h(component, { articles, isLoading, fetchArticles });
};
},
});
};
export default WithFetch;

上述代碼定義了一個(gè)WithFetch高階組件函數(shù)，它接收一個(gè)url參數(shù)，返回一個(gè)函數(shù)，該函數(shù)接收一個(gè)組件參數(shù)，最終返回一個(gè)新的組件。新組件使用了useFetch函數(shù)中的邏輯代碼，并將邏輯代碼注入到組件props中。

最后，在組件中使用WithFetch高階組件即可實(shí)現(xiàn)復(fù)用邏輯代碼的目的。

import { defineComponent, ref } from 'vue';
import WithFetch from './WithFetch';
import ArticleList from './ArticleList';
const url = ref('/api/articles');
export default defineComponent({
name: 'App',
setup() {
const WithArticles = WithFetch(url)(ArticleList);
return () =>h(WithArticles);
},
});

上述代碼演示了如何在組件中使用WithFetch高階組件，并注入useFetch函數(shù)中的邏輯代碼。當(dāng)我們需要復(fù)用useFetch函數(shù)中的邏輯代碼時(shí)，只需要調(diào)用WithFetch，并傳入組件參數(shù)即可。