Vue 3.0 组合式API 介绍 【Vue3 从零开始】
创始人
2024-05-29 18:06:12
0

提示

在阅读文档之前,你应该已经熟悉了这两个 Vue 基础和创建组件。

在 Vue Mastery 上观看关于组合式 API 的免费视频。

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

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

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

该组件有以下几个职责:

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

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

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

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

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

#组合式 API 基础

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

#setup 组件选项

观看 Vue Mastery 上的免费 setup 视频。

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

WARNING

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

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

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

 
  1. // src/components/UserRepositories.vue
  2. export default {
  3. components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  4. props: {
  5. user: { type: String }
  6. },
  7. setup(props) {
  8. console.log(props) // { user: '' }
  9. return {} // 这里返回的任何内容都可以用于组件的其余部分
  10. }
  11. // 组件的“其余部分”
  12. }

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

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

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

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

 
  1. // src/components/UserRepositories.vue `setup` function
  2. import { fetchUserRepositories } from '@/api/repositories'
  3. // 在我们的组件内
  4. setup (props) {
  5. let repositories = []
  6. const getUserRepositories = async () => {
  7. repositories = await fetchUserRepositories(props.user)
  8. }
  9. return {
  10. repositories,
  11. getUserRepositories // 返回的函数与方法的行为相同
  12. }
  13. }

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

#带 ref 的响应式变量

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

 
  1. import { ref } from 'vue'
  2. const counter = ref(0)

ref 接受参数并返回它包装在具有 value property 的对象中,然后可以使用该 property 访问或更改响应式变量的值:

 
  1. import { ref } from 'vue'
  2. const counter = ref(0)
  3. console.log(counter) // { value: 0 }
  4. console.log(counter.value) // 0
  5. counter.value++
  6. console.log(counter.value) // 1

在对象中包装值似乎不必要,但在 JavaScript 中保持不同数据类型的行为统一是必需的。这是因为在 JavaScript 中,Number 或 String 等基本类型是通过值传递的,而不是通过引用传递的:

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

提示

换句话说,ref 对我们的值创建了一个响应式引用。使用引用的概念将在整个组合式 API 中经常使用。

回到我们的例子,让我们创建一个响应式的 repositories 变量:

 
  1. // src/components/UserRepositories.vue `setup` function
  2. import { fetchUserRepositories } from '@/api/repositories'
  3. import { ref } from 'vue'
  4. // in our component
  5. setup (props) {
  6. const repositories = ref([])
  7. const getUserRepositories = async () => {
  8. repositories.value = await fetchUserRepositories(props.user)
  9. }
  10. return {
  11. repositories,
  12. getUserRepositories
  13. }
  14. }

完成!现在,每当我们调用 getUserRepositories 时,repositories 都将发生变化,视图将更新以反映更改。我们的组件现在应该如下所示:

 
  1. // src/components/UserRepositories.vue
  2. import { fetchUserRepositories } from '@/api/repositories'
  3. import { ref } from 'vue'
  4. export default {
  5. components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  6. props: {
  7. user: { type: String }
  8. },
  9. setup (props) {
  10. const repositories = ref([])
  11. const getUserRepositories = async () => {
  12. repositories.value = await fetchUserRepositories(props.user)
  13. }
  14. return {
  15. repositories,
  16. getUserRepositories
  17. }
  18. },
  19. data () {
  20. return {
  21. filters: { ... }, // 3
  22. searchQuery: '' // 2
  23. }
  24. },
  25. computed: {
  26. filteredRepositories () { ... }, // 3
  27. repositoriesMatchingSearchQuery () { ... }, // 2
  28. },
  29. watch: {
  30. user: 'getUserRepositories' // 1
  31. },
  32. methods: {
  33. updateFilters () { ... }, // 3
  34. },
  35. mounted () {
  36. this.getUserRepositories() // 1
  37. }
  38. }

我们已经将第一个逻辑关注点中的几个部分移到了 setup 方法中,它们彼此非常接近。剩下的就是在 mounted 钩子中调用 getUserRepositories,并设置一个监听器,以便在 user prop 发生变化时执行此操作。

我们将从生命周期钩子开始。

#生命周期钩子注册内部 setup

为了使组合式 API 的特性与选项式 API 相比更加完整,我们还需要一种在 setup 中注册生命周期钩子的方法。这要归功于从 Vue 导出的几个新函数。组合式 API 上的生命周期钩子与选项式 API 的名称相同,但前缀为 on:即 mounted 看起来像 onMounted

这些函数接受在组件调用钩子时将执行的回调。

让我们将其添加到 setup 函数中:

 
  1. // src/components/UserRepositories.vue `setup` function
  2. import { fetchUserRepositories } from '@/api/repositories'
  3. import { ref, onMounted } from 'vue'
  4. // in our component
  5. setup (props) {
  6. const repositories = ref([])
  7. const getUserRepositories = async () => {
  8. repositories.value = await fetchUserRepositories(props.user)
  9. }
  10. onMounted(getUserRepositories) // on `mounted` call `getUserRepositories`
  11. return {
  12. repositories,
  13. getUserRepositories
  14. }
  15. }

现在我们需要对 user prop 所做的更改做出反应。为此,我们将使用独立的 watch 函数。

#watch 响应式更改

就像我们如何使用 watch 选项在组件内的 user property 上设置侦听器一样,我们也可以使用从 Vue 导入的 watch 函数执行相同的操作。它接受 3 个参数:

  • 一个响应式引用或我们想要侦听的 getter 函数
  • 一个回调
  • 可选的配置选项

下面让我们快速了解一下它是如何工作的

 
  1. import { ref, watch } from 'vue'
  2. const counter = ref(0)
  3. watch(counter, (newValue, oldValue) => {
  4. console.log('The new counter value is: ' + counter.value)
  5. })

例如,每当 counter 被修改时 counter.value=5,watch 将触发并执行回调 (第二个参数),在本例中,它将把 'The new counter value is:5' 记录到我们的控制台中。

以下是等效的选项式 API:

 
  1. export default {
  2. data() {
  3. return {
  4. counter: 0
  5. }
  6. },
  7. watch: {
  8. counter(newValue, oldValue) {
  9. console.log('The new counter value is: ' + this.counter)
  10. }
  11. }
  12. }

有关 watch 的详细信息,请参阅我们的深入指南。

现在我们将其应用到我们的示例中:

 
  1. // src/components/UserRepositories.vue `setup` function
  2. import { fetchUserRepositories } from '@/api/repositories'
  3. import { ref, onMounted, watch, toRefs } from 'vue'
  4. // 在我们组件中
  5. setup (props) {
  6. // 使用 `toRefs` 创建对prop的 `user` property 的响应式引用
  7. const { user } = toRefs(props)
  8. const repositories = ref([])
  9. const getUserRepositories = async () => {
  10. // 更新 `prop.user` 到 `user.value` 访问引用值
  11. repositories.value = await fetchUserRepositories(user.value)
  12. }
  13. onMounted(getUserRepositories)
  14. // 在用户 prop 的响应式引用上设置一个侦听器
  15. watch(user, getUserRepositories)
  16. return {
  17. repositories,
  18. getUserRepositories
  19. }
  20. }

你可能已经注意到在我们的 setup 的顶部使用了 toRefs。这是为了确保我们的侦听器能够对 user prop 所做的更改做出反应。

有了这些变化,我们就把第一个逻辑关注点移到了一个地方。我们现在可以对第二个关注点执行相同的操作——基于 searchQuery 进行过滤,这次是使用计算属性。

#独立的 computed 属性

与 ref 和 watch 类似,也可以使用从 Vue 导入的 computed 函数在 Vue 组件外部创建计算属性。让我们回到我们的 counter 例子:

 
  1. import { ref, computed } from 'vue'
  2. const counter = ref(0)
  3. const twiceTheCounter = computed(() => counter.value * 2)
  4. counter.value++
  5. console.log(counter.value) // 1
  6. console.log(twiceTheCounter.value) // 2

在这里,computed 函数返回一个作为 computed 的第一个参数传递的 getter 类回调的输出的一个只读响应式引用。为了访问新创建的计算变量的 value,我们需要像使用 ref 一样使用 .value property。

让我们将搜索功能移到 setup 中:

 
  1. // src/components/UserRepositories.vue `setup` function
  2. import { fetchUserRepositories } from '@/api/repositories'
  3. import { ref, onMounted, watch, toRefs, computed } from 'vue'
  4. // in our component
  5. setup (props) {
  6. // 使用 `toRefs` 创建对 props 的 `user` property 的响应式引用
  7. const { user } = toRefs(props)
  8. const repositories = ref([])
  9. const getUserRepositories = async () => {
  10. // 更新 `props.user ` 到 `user.value` 访问引用值
  11. repositories.value = await fetchUserRepositories(user.value)
  12. }
  13. onMounted(getUserRepositories)
  14. // 在用户 prop 的响应式引用上设置一个侦听器
  15. watch(user, getUserRepositories)
  16. const searchQuery = ref('')
  17. const repositoriesMatchingSearchQuery = computed(() => {
  18. return repositories.value.filter(
  19. repository => repository.name.includes(searchQuery.value)
  20. )
  21. })
  22. return {
  23. repositories,
  24. getUserRepositories,
  25. searchQuery,
  26. repositoriesMatchingSearchQuery
  27. }
  28. }

对于其他的逻辑关注点我们也可以这样做,但是你可能已经在问这个问题了——这不就是把代码移到 setup 选项并使它变得非常大吗?嗯,那是真的。这就是为什么在继续其他任务之前,我们将首先将上述代码提取到一个独立的组合式函数。让我们从创建 useUserRepositories 开始:

 
  1. // src/composables/useUserRepositories.js
  2. import { fetchUserRepositories } from '@/api/repositories'
  3. import { ref, onMounted, watch } from 'vue'
  4. export default function useUserRepositories(user) {
  5. const repositories = ref([])
  6. const getUserRepositories = async () => {
  7. repositories.value = await fetchUserRepositories(user.value)
  8. }
  9. onMounted(getUserRepositories)
  10. watch(user, getUserRepositories)
  11. return {
  12. repositories,
  13. getUserRepositories
  14. }
  15. }

然后是搜索功能:

 
  1. // src/composables/useRepositoryNameSearch.js
  2. import { ref, computed } from 'vue'
  3. export default function useRepositoryNameSearch(repositories) {
  4. const searchQuery = ref('')
  5. const repositoriesMatchingSearchQuery = computed(() => {
  6. return repositories.value.filter(repository => {
  7. return repository.name.includes(searchQuery.value)
  8. })
  9. })
  10. return {
  11. searchQuery,
  12. repositoriesMatchingSearchQuery
  13. }
  14. }

现在在单独的文件中有了这两个功能,我们就可以开始在组件中使用它们了。以下是如何做到这一点:

 
  1. // src/components/UserRepositories.vue
  2. import useUserRepositories from '@/composables/useUserRepositories'
  3. import useRepositoryNameSearch from '@/composables/useRepositoryNameSearch'
  4. import { toRefs } from 'vue'
  5. export default {
  6. components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  7. props: {
  8. user: { type: String }
  9. },
  10. setup (props) {
  11. const { user } = toRefs(props)
  12. const { repositories, getUserRepositories } = useUserRepositories(user)
  13. const {
  14. searchQuery,
  15. repositoriesMatchingSearchQuery
  16. } = useRepositoryNameSearch(repositories)
  17. return {
  18. // 因为我们并不关心未经过滤的仓库
  19. // 我们可以在 `repositories` 名称下暴露过滤后的结果
  20. repositories: repositoriesMatchingSearchQuery,
  21. getUserRepositories,
  22. searchQuery,
  23. }
  24. },
  25. data () {
  26. return {
  27. filters: { ... }, // 3
  28. }
  29. },
  30. computed: {
  31. filteredRepositories () { ... }, // 3
  32. },
  33. methods: {
  34. updateFilters () { ... }, // 3
  35. }
  36. }

此时,你可能已经知道了这个练习,所以让我们跳到最后,迁移剩余的过滤功能。我们不需要深入了解实现细节,因为这不是本指南的重点。

 
  1. // src/components/UserRepositories.vue
  2. import { toRefs } from 'vue'
  3. import useUserRepositories from '@/composables/useUserRepositories'
  4. import useRepositoryNameSearch from '@/composables/useRepositoryNameSearch'
  5. import useRepositoryFilters from '@/composables/useRepositoryFilters'
  6. export default {
  7. components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  8. props: {
  9. user: { type: String }
  10. },
  11. setup(props) {
  12. const { user } = toRefs(props)
  13. const { repositories, getUserRepositories } = useUserRepositories(user)
  14. const {
  15. searchQuery,
  16. repositoriesMatchingSearchQuery
  17. } = useRepositoryNameSearch(repositories)
  18. const {
  19. filters,
  20. updateFilters,
  21. filteredRepositories
  22. } = useRepositoryFilters(repositoriesMatchingSearchQuery)
  23. return {
  24. // 因为我们并不关心未经过滤的仓库
  25. // 我们可以在 `repositories` 名称下暴露过滤后的结果
  26. repositories: filteredRepositories,
  27. getUserRepositories,
  28. searchQuery,
  29. filters,
  30. updateFilters
  31. }
  32. }
  33. }

我们完成了!

请记住,我们只触及了组合式 API 的表面以及它允许我们做什么。要了解更多信息,请参阅深入指南。

相关内容

热门资讯

我的漫画老师作文 我的漫画老师作文100字(精选39篇)  在平平淡淡的学习、工作、生活中,大家总免不了要接触或使用作...
以暑假为题的作文 以暑假为题的作文15篇  在学习、工作、生活中,大家对作文都再熟悉不过了吧,根据写作命题的特点,作文...
田园风光作文300字 田园风光作文300字田园风光  陈轶轩  去年暑假,爸爸妈妈和我来到了乡下奶奶家,观看这里的田园风光...
那段孤单的日子作文600字 那段孤单的日子作文600字  是谁!我将目光锁向厨房的门后,全身毛骨悚然,腿脚瘫痪般的轻声走向厨房。...
电影《训龙高手》500字作文 电影《训龙高手》500字作文  马上就要到“六一儿童节”了,妈妈问我想要什么?我说:“我想看电影《训...
三八妇女节给妈妈的祝福语 三八妇女节给妈妈的祝福语  用一缕春风,二滴夏雨,三片秋叶,四朵冬梅,织成五颜六色的礼盒,结着七彩八...
春节作文400字 春节作文400字4篇  在现实生活或工作学习中,大家对作文都再熟悉不过了吧,作文是通过文字来表达一个...
寒假游记海南行作文 寒假游记海南行作文  无论是身处学校还是步入社会,大家都经常接触到作文吧,作文是人们以书面形式表情达...
湖南卫视小年夜春晚播出时间及... 湖南卫视2015小年夜春晚播出时间及节目单  主持人:何炅、汪涵、谢娜、梁田  播出时间:2015年...
生活告诉我作文 生活告诉我作文3篇  在平平淡淡的日常中,大家对作文都不陌生吧,借助作文可以宣泄心中的情感,调节自己...
人生路上坎坷多作文 人生路上坎坷多作文(精选28篇)  无论在学习、工作或是生活中,大家都接触过作文吧,借助作文可以宣泄...
梦的翅膀作文 梦的翅膀作文梦的翅膀成功就是让人梦想成真的终点,在通往成功的路上,我们品尝着生活的酸甜苦辣。每当我听...
描写动物的作文 描写动物的作文范文4篇  小兔子太可爱了!小朋友,你们有没有养过这样的小兔子?没有就赶快去养一只吧!...
中秋节赏月的作文400字 中秋节赏月的作文400字汇总7篇  在平平淡淡的学习、工作、生活中,大家都有写作文的经历,对作文很是...
猴年短信祝福语 猴年短信祝福语精选  1、新年佳节到,向你问个好,身体倍健康,心情特别好;好运天天交,口味顿顿妙。最...
各民族的风俗习惯 各民族的风俗习惯各民族的风俗习惯1.藏族藏族主要分布在西-藏,其余在青海、甘肃、四川、云南等地。藏族...
快乐的春节作文300字 【必备】快乐的春节作文300字6篇  在日常学习、工作和生活中,大家都跟作文打过交道吧,通过作文可以...
元宵节花灯字谜 2017年元宵节花灯字谜大全  以下是小编给大家整理的元宵节花灯字谜的内容,欢迎大家查看。  百无一...
行善作文 行善作文600字(通用14篇)  在平平淡淡的日常中,大家都不可避免地要接触到作文吧,借助作文可以宣...
教师节英文祝福语 教师节英文祝福语大全  在日常的学习、工作、生活中,大家都有写祝福语的经历,对祝福语很是熟悉吧,祝福...