Vue3基础（二）：为什么要使用组式API（详解）

创建 Vue 组件允许我们将界面的可重复部分及其功能提取到可重用的代码段中。

仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。

然而，我们的集体经验证明，仅凭这一点可能还不够，尤其是当您的应用程序变得非常大时——想想几百个组件。

在处理如此大的应用程序时，共享和重用代码变得尤为重要。

让我们想象一下，在我们的应用程序中，我们有一个视图来显示某个用户的存储库列表。

最重要的是，我们希望应用搜索和过滤功能。我们处理此视图的组件可能如下所示： 

// src/components/UserRepositories.vue

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      repositories: [], // 1
      filters: { ... }, // 3
      searchQuery: '' // 2
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
    repositoriesMatchingSearchQuery () { ... }, // 2
  },
  watch: {
    user: 'getUserRepositories' // 1
  },
  methods: {
    getUserRepositories () {
      // using `this.user` to fetch user repositories
    }, // 1
    updateFilters () { ... }, // 3
  },
  mounted () {
    this.getUserRepositories() // 1
  }
}

 

这个组件有几个职责：

1. 从该用户名的假定外部 API 获取存储库，并在用户更改时刷新它
2. 使用searchQuery字符串搜索存储库
3. 使用filters对象过滤存储库

在大多数情况下，使用组件选项 ( data, computed, methods, watch)组织逻辑是有效的。

然而，当我们的组件变大时，逻辑问题的列表也会增加。

这可能导致组件难以阅读和理解，尤其是对于那些一开始就没有编写它们的人。

 

 

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

这种碎片化导致难以理解和维护复杂的组件。

选项的分离掩盖了潜在的逻辑问题。

此外，在处理单个逻辑问题时，我们必须不断“跳转”相关代码的选项块。

如果我们可以搭配与相同逻辑关注点相关的代码，那就更好了。

而这正是 Composition API 使我们能够做到的。