Vue

组件#xff0c;我们可以将接口的可重复部分及其功能提取到可重用的代码段中。

仅此一项就可以使我们的应用程序在可维护性和…提示

Vue

组件我们可以将接口的可重复部分及其功能提取到可重用的代码段中。

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

然而我们的经验已经证明光靠这一点可能是不够的尤其是当你的应用程序变得非常大的时候——想想几百个组件。

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

假设在我们的应用程序中我们有一个视图来显示某个用户的仓库列表。

除此之外我们还希望应用搜索和筛选功能。

处理此视图的组件可能如下所示

src/components/UserRepositories.vueexport

default

3repositoriesMatchingSearchQuery

...

组织逻辑在大多数情况下都有效。

然而当我们的组件变得更大时逻辑关注点的列表也会增长。

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

这种碎片化使得理解和维护复杂组件变得困难。

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

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

如果我们能够将与同一个逻辑关注点相关的代码配置在一起会更好。

而这正是组合式

API

之外你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

setup

src/components/UserRepositories.vueexport

default

获取该用户名的仓库并在用户更改时刷新它我们将从最明显的部分开始

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

src/components/UserRepositories.vue

setup

fetchUserRepositories(props.user)}return

{repositories,getUserRepositories

repositories

变量是非响应式的。

这意味着从用户的角度来看仓库列表将保持为空。

我们来解决这个问题

ref

0counter.valueconsole.log(counter.value)

在对象中包装值似乎不必要但在

在任何值周围都有一个包装器对象这样我们就可以在整个应用程序中安全地传递它而不必担心在某个地方失去它的响应性。

换句话说ref

src/components/UserRepositories.vue

setup

fetchUserRepositories(props.user)}return

{repositories,getUserRepositories}}

完成现在每当我们调用

src/components/UserRepositories.vueimport

from

fetchUserRepositories(props.user)}return

{repositories,getUserRepositories}},data

{return

3repositoriesMatchingSearchQuery

...

src/components/UserRepositories.vue

setup

fetchUserRepositories(props.user)}onMounted(getUserRepositories)

mounted

{repositories,getUserRepositories}}

现在我们需要对

src/components/UserRepositories.vue

setup

fetchUserRepositories(user.value)}onMounted(getUserRepositories)//

在用户

{repositories,getUserRepositories}}

setup

有了这些变化我们就把第一个逻辑关注点移到了一个地方。

我们现在可以对第二个关注点执行相同的操作——基于

searchQuery

2)counter.valueconsole.log(counter.value)

1console.log(twiceTheCounter.value)

在这里computed

类回调的输出的一个只读的响应式引用。

为了访问新创建的计算变量的

value我们需要像使用

src/components/UserRepositories.vue

setup

fetchUserRepositories(user.value)}onMounted(getUserRepositories)//

在用户

repositoriesMatchingSearchQuery

computed(()

repositories.value.filter(repository

repository.name.includes(searchQuery.value))})return

{repositories,getUserRepositories,searchQuery,repositoriesMatchingSearchQuery}}

对于其他的逻辑关注点我们也可以这样做但是你可能已经在问这个问题了——这不就是把代码移到

setup

选项并使它变得非常大吗嗯那是真的。

这就是为什么在继续其他任务之前我们将首先将上述代码提取到一个独立的组合式函数。

让我们从创建

useUserRepositories

src/composables/useUserRepositories.jsimport

from

fetchUserRepositories(user.value)}onMounted(getUserRepositories)watch(user,

{repositories,getUserRepositories}}

src/composables/useRepositoryNameSearch.jsimport

ref,

useRepositoryNameSearch(repositories)

{const

repositoriesMatchingSearchQuery

computed(()

repositories.value.filter(repository

{return

repository.name.includes(searchQuery.value)})})return

{searchQuery,repositoriesMatchingSearchQuery}}

现在在单独的文件中有了这两个功能我们就可以开始在组件中使用它们了。

以下是如何做到这一点

src/components/UserRepositories.vueimport

useUserRepositories

/composables/useUserRepositoriesimport

from

/composables/useRepositoryNameSearchimport

toRefs

{searchQuery,repositoriesMatchingSearchQuery}

useRepositoryNameSearch(repositories)return

{//

repositoriesMatchingSearchQuery,getUserRepositories,searchQuery,}},data

{return

此时你可能已经知道了这个练习所以让我们跳到最后迁移剩余的过滤功能。

我们不需要深入了解实现细节因为这不是本指南的重点。

src/components/UserRepositories.vueimport

toRefs

/composables/useUserRepositoriesimport

from

/composables/useRepositoryNameSearchimport

useRepositoryFilters

/composables/useRepositoryFiltersexport

default

{searchQuery,repositoriesMatchingSearchQuery}

useRepositoryNameSearch(repositories)const

{filters,updateFilters,filteredRepositories}

useRepositoryFilters(repositoriesMatchingSearchQuery)return

{//

filteredRepositories,getUserRepositories,searchQuery,filters,updateFilters}}}

API