Vue 3.0组合式API

一、组合式API的核心思想
将同一个逻辑关注点相关代码收集在一起。从而更好的共享和重用代码。
接下来我们以根据user加载列表组件并根据审批人筛选过滤组件来进行组合api的演示。
1、这是userRepositories.vue组件提取过两个逻辑点的代码片段。

    setup(props) {
      const user = toRefs(props)

      const { repositories, getUserRepositories } = useUserRepositories(user)

      const { searchQuery, repositoriesMatchingSearchQuery } = useRepositoryNameSearch(repositories)

      return {
        repositories,
        getUserRepositories,
        searchQuery,
        repositoriesMatchingSearchQuery,
      }
    }

借助setup 选项是一个接收 props，并将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板特性。我们最终要暴露给剩余组件的属性有repositories 列表组件数据集合、getUserRepositories获取列表组件的方法、searchQuery搜索条件、repositoriesMatchingSearchQuery根据搜索条件得到的过滤组件数据集合。

2、接下来我们先把第一个逻辑点提取出来、我们把根据用户获取列表的逻辑放入useUserRepositories.js中

import { fetchUserRepositories } from '@/api/combined.js'
import { ref, onMounted, watch } from 'vue'

export default function useUserRepositories(user) {
  let repositories = ref([])
  const getUserRepositories = async () => {
    let result = await fetchUserRepositories(user)
    repositories.value = result.data
  }
  onMounted(getUserRepositories)
  watch(user, getUserRepositories)
  return {
    repositories,
    getUserRepositories,
  }
}

我们借助带ref的响应式变量repositories作为列表集合的存储变量、通过watch在user发生变化时调用getUserRepositories函数获取repositories列表集合。并在onMounted周期函数中初始化列表。最终返回repositories列表和getUserRepositories更新列表的函数。

上图的组件列表就是根据user获取到的列表数据
3、接下来我们来提取第二个逻辑关注点：根据审批人搜索得到过滤组件、我们把逻辑代码提取至useRepositoryNameSearch.js中

import { ref, computed } from 'vue'

export default function useRepositoryNameSearch(repositories) {
  let searchQuery = ref('')
  const repositoriesMatchingSearchQuery = computed(() => {
    return repositories.value.filter((repository) => repository.author.includes(searchQuery.value))
  })

  return {
    searchQuery,
    repositoriesMatchingSearchQuery,
  }
}

借助带ref的响应式变量searchQuery作为搜索条件、并根据搜索条件的变动、使用computed计算属性过滤出符合搜索条件的过滤组件。

上图展示了在输入框中输入搜索条件，过滤组件列表则时时显示匹配出的结果。

以上就是关于vue3.0组合式api使用场景的分享，关注我，一起学习前端技术！