通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。仅此一项就可以使我们的应用在可维护性和灵活性方面走得相当远。然而，我们的经验已经证明，光靠这一点可能并不够，尤其是当你的应用变得非常大的时候——想想几百个组件。处理这样的大型应用时，共享和重用代码变得尤为重要。
    假设我们的应用中有一个显示某个用户的仓库列表的视图。此外，我们还希望有搜索和筛选功能。实现此视图组件的代码可能如下所示：

    1. // src/components/UserRepositories.vue
    3. export default {
    4.   components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
    5.   props: {
    6.     user: { 
    7.       type: String,
    8.       required: true
    9.     }
    10.   },
    11.   data () {
    12.     return {
    13.       repositories: [], // 1
    14.       filters: { ... }, // 3
    15.       searchQuery: '' // 2
    16.     }
    17.   },
    18.   computed: {
    19.     filteredRepositories () { ... }, // 3
    20.     repositoriesMatchingSearchQuery () { ... }, // 2
    21.   },
    22.   watch: {
    23.     user: 'getUserRepositories' // 1
    24.   },
    25.   methods: {
    26.     getUserRepositories () {
    27.       // 使用 `this.user` 获取用户仓库
    28.     }, // 1
    29.     updateFilters () { ... }, // 3
    30.   },
    31.   mounted () {
    32.     this.getUserRepositories() // 1
    33.   }
    34. }

    该组件有以下几个职责：

    1. 从假定的外部 API 获取该用户的仓库，并在用户有任何更改时进行刷新
    2. 使用 searchQuery 字符串搜索仓库
    3. 使用 filters 对象筛选仓库

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

    这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。
    如果能够将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 使我们能够做到的。

    这段内容也表示就是简单的吧对应的 内容的部分，部分的内容的定位的修改；需要后面的对接；
    这部分内容是对之前部分的setup的内容区别开来；