1.组合API的核心思想是将相同逻辑关注点的相关代码集合起来。这允许更好的代码共享和重用。接下来，我们将通过根据用户加载列表组件和根据批准人过滤过滤器组件来演示组合API。1、这是userRepositories.vue组件提取出来的两个逻辑点的代码片段。setup(props){constuser=toRefs(props)const{repositories,getUserRepositories}=useUserRepositories(user)const{searchQuery,repositoriesMatchingSearchQuery}=useRepositoryNameSearch(repositories)return{repositories,getUserRepositories,searchQuery,repositoriesMatchingSearchQuery,}}借用设置选项是一个接受props并将设置返回给组件其余部分（计算属性、方法、生命周期挂钩等）的所有内容以及组件的模板特征公开。我们最终会暴露给其余组件的属性包括repositories列表组件数据集合，获取列表组件的getUserRepositories方法，searchQuery搜索条件，repositoriesMatchingSearchQuery根据搜索条件过滤组件数据集合。2.接下来，我们首先提取第一个逻辑点。我们把根据用户获取列表的逻辑放到useUserRepositories.js中letrepositories=ref([])constgetUserRepositories=async()=>{letresult=awaitfetchUserRepositories(user)repositories.value=result.data}onMounted(getUserRepositories)watch(user,getUserRepositories)return{repositories,getUserRepositories,}我们使用带有ref的responsive变量repositories作为列表集合的存储变量，当用户发生变化时，使用watch调用getUserRepositories函数获取repositories列表集合。并在onMounted循环函数中初始化列表。最终返回存储库列表和更新的getUserRepositories列表的函数。上图中的组件列表是根据用户获取的列表数据。3、接下来我们提取第二个逻辑关注点：根据审批者的search获取过滤组件，提取逻辑代码useRepositoryNameSearch.jsimport{ref,computed}from'vue'exportdefaultfunctionuseRepositoryNameSearch(repositories){letsearchQuery=ref('')constrepositoriesMatchingSearchQuery=computed(()=>{returnrepositories.value.filter((repository)=>repository.author.includes(searchQuery.value))})return{searchQuery,repositoriesMatchingSearchQuery,}}使用以ref为搜索条件的响应变量searchQuery，根据搜索条件的变化，使用computed属性过滤出满足搜索条件的过滤器组件。上图表示在输入框中输入了搜索条件，过滤器组件列表会不时显示匹配的结果。以上就是vue3.0组合api使用场景的分享，关注我，一起学习前端技术吧！
