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