组合筛选vue_Vue 3 组合式API介绍

组合式API介绍

通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。

假设在我们的应用程序中，我们有一个视图来显示某个用户的仓库列表。除此之外，我们还希望应用搜索和筛选功能。处理此视图的组件可能如下所示：

// src/components/UserRepositories.vue

export default {  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },  props: {    user: { type: String }  },  data () {    return {      repositories: [], // 1      filters: { ... }, // 3      searchQuery: '' // 2    }  },  computed: {    filteredRepositories () { ... }, // 3    repositoriesMatchingSearchQuery () { ... }, // 2  },  watch: {    user: 'getUserRepositories' // 1  },  methods: {    getUserRepositories () {      // 使用 `this.user` 获取用户仓库    }, // 1    updateFilters () { ... }, // 3  },  mounted () {    this.getUserRepositories() // 1  }}

该组件有以下几个职责：

从假定的外部 API 获取该用户名的仓库，并在用户更改时刷新它
使用 searchQuery 字符串搜索存储库
使用 filters 对象筛选仓库

用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效。然而，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，尤其是对于那些一开始就没有编写这些组件的人来说。

一个大型组件的示例，其中逻辑关注点是按颜色分组。

这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。

如果我们能够将与同一个逻辑关注点相关的代码配置在一起会更好。而这正是组合式 API 使我们能够做到的。

组合式 API 基础

既然我们知道了为什么，我们就可以知道怎么做。为了开始使用组合式 API，我们首先需要一个可以实际使用它的地方。在 Vue 组件中，我们将此位置称为 setup。

`setup` 组件选项

新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点。

由于在执行 setup 时尚未创建组件实例，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

setup 选项应该是一个接受 props 和 context 的函数，我们将在稍后讨论。此外，我们从 setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

让我们添加 setup 到我们的组件中：

// src/components/UserRepositories.vue

export default {  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },  props: {    user: { type: String }  },  setup(props) {    console.log(props) // { user: '' }

    return {} // 这里返回的任何内容都可以用于组件的其余部分  }  // 组件的“其余部分”}

现在让我们从提取第一个逻辑关注点开始 (在原始代码段中标记为“1”)。

“

从假定的外部 API 获取该用户名的仓库，并在用户更改时刷新它

”

我们将从最明显的部分开始：

仓库列表
更新仓库列表的函数
返回列表和函数，以便其他组件选项可以访问它们

// src/components/UserRepositories.vue `setup` functionimport { fetchUserRepositories } from '@/api/repositories'

// 在我们的组件内setup (props) {  let repositories = []  const getUserRepositories = async () => {    repositories = await fetchUserRepositories(props.user)  }

  return {    repositories,    getUserRepositories // 返回的函数与方法的行为相同  }}

这是我们的出发点，但它还不能工作，因为我们的 repositories 变量是非响应式的。这意味着从用户的角度来看，仓库列表将保持为空。我们来解决这个问题！

带 `ref` 的响应式变量

在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用，如下所示：

<div class="template-m-wrap">counter ---> {{ counter }}div></template>