关于vue.js:Vue-30组合式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应用场景的分享，关注我，一起学习前端技术！