关于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 应用场景的分享，关注我，一起学习前端技术！