AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue3中的组合式API的详细教程和介绍

2023-12-12 109
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3中的组合式API的详细教程和介绍

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：vue.js

🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹

💖感谢大家支持！您的观看就是作者创作的动力

介绍


通过创建 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，我们首先需要一个可以实际使用它的地方。在 Vue3 组件中，我们将此位置称为 setup。


setup 组件选项


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


WARNING

由于在执行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` function
import { 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 函数使任何响应式变量在任何地方起作用，如下所示：


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


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


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


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



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


提示


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


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


// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref } from 'vue'
// in our component
setup (props) {
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(props.user)
  }
  return {
    repositories,
    getUserRepositories
  }
}


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


// src/components/UserRepositories.vue
import { fetchUserRepositories } from '@/api/repositories'
import { ref } from 'vue'
export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup (props) {
    const repositories = ref([])
    const getUserRepositories = async () => {
      repositories.value = await fetchUserRepositories(props.user)
    }
    return {
      repositories,
      getUserRepositories
    }
  },
  data () {
    return {
      filters: { ... }, // 3
      searchQuery: '' // 2
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
    repositoriesMatchingSearchQuery () { ... }, // 2
  },
  watch: {
    user: 'getUserRepositories' // 1
  },
  methods: {
    updateFilters () { ... }, // 3
  },
  mounted () {
    this.getUserRepositories() // 1
  }
}


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


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


生命周期钩子注册内部 setup


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


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


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


// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted } from 'vue'
// in our component
setup (props) {
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(props.user)
  }
  onMounted(getUserRepositories) // on `mounted` call `getUserRepositories`
  return {
    repositories,
    getUserRepositories
  }
}


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


watch 响应式更改


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


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


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


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


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


以下是等效的选项式 API：


export default {
  data() {
    return {
      counter: 0
    }
  },
  watch: {
    counter(newValue, oldValue) {
      console.log('The new counter value is: ' + this.counter)
    }
  }
}


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


// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch, toRefs } from 'vue'
// 在我们组件中
setup (props) {
  // 使用 `toRefs` 创建对prop的 `user` property 的响应式引用
  const { user } = toRefs(props)
  const repositories = ref([])
  const getUserRepositories = async () => {
    // 更新 `prop.user` 到 `user.value` 访问引用值
    repositories.value = await fetchUserRepositories(user.value)
  }
  onMounted(getUserRepositories)
  // 在用户 prop 的响应式引用上设置一个侦听器
  watch(user, getUserRepositories)
  return {
    repositories,
    getUserRepositories
  }
}


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


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


独立的 computed 属性


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


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


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


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


// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch, toRefs, computed } from 'vue'
// in our component
setup (props) {
  // 使用 `toRefs` 创建对 props 的 `user` property 的响应式引用
  const { user } = toRefs(props)
  const repositories = ref([])
  const getUserRepositories = async () => {
    // 更新 `props.user ` 到 `user.value` 访问引用值
    repositories.value = await fetchUserRepositories(user.value)
  }
  onMounted(getUserRepositories)
  // 在用户 prop 的响应式引用上设置一个侦听器
  watch(user, getUserRepositories)
  const searchQuery = ref('')
  const repositoriesMatchingSearchQuery = computed(() => {
    return repositories.value.filter(
      repository => repository.name.includes(searchQuery.value)
    )
  })
  return {
    repositories,
    getUserRepositories,
    searchQuery,
    repositoriesMatchingSearchQuery
  }
}


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


// src/composables/useUserRepositories.js
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch } from 'vue'
export default function useUserRepositories(user) {
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(user.value)
  }
  onMounted(getUserRepositories)
  watch(user, getUserRepositories)
  return {
    repositories,
    getUserRepositories
  }
}


然后是搜索功能：


// src/composables/useRepositoryNameSearch.js
import { ref, computed } from 'vue'
export default function useRepositoryNameSearch(repositories) {
  const searchQuery = ref('')
  const repositoriesMatchingSearchQuery = computed(() => {
    return repositories.value.filter(repository => {
      return repository.name.includes(searchQuery.value)
    })
  })
  return {
    searchQuery,
    repositoriesMatchingSearchQuery
  }
}


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


// src/components/UserRepositories.vue
import useUserRepositories from '@/composables/useUserRepositories'
import useRepositoryNameSearch from '@/composables/useRepositoryNameSearch'
import { toRefs } from 'vue'
export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup (props) {
    const { user } = toRefs(props)
    const { repositories, getUserRepositories } = useUserRepositories(user)
    const {
      searchQuery,
      repositoriesMatchingSearchQuery
    } = useRepositoryNameSearch(repositories)
    return {
      // 因为我们并不关心未经过滤的仓库
      // 我们可以在 `repositories` 名称下暴露过滤后的结果
      repositories: repositoriesMatchingSearchQuery,
      getUserRepositories,
      searchQuery,
    }
  },
  data () {
    return {
      filters: { ... }, // 3
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
  },
  methods: {
    updateFilters () { ... }, // 3
  }
}


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


// src/components/UserRepositories.vue
import { toRefs } from 'vue'
import useUserRepositories from '@/composables/useUserRepositories'
import useRepositoryNameSearch from '@/composables/useRepositoryNameSearch'
import useRepositoryFilters from '@/composables/useRepositoryFilters'
export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup(props) {
    const { user } = toRefs(props)
    const { repositories, getUserRepositories } = useUserRepositories(user)
    const {
      searchQuery,
      repositoriesMatchingSearchQuery
    } = useRepositoryNameSearch(repositories)
    const {
      filters,
      updateFilters,
      filteredRepositories
    } = useRepositoryFilters(repositoriesMatchingSearchQuery)
    return {
      // 因为我们并不关心未经过滤的仓库
      // 我们可以在 `repositories` 名称下暴露过滤后的结果
      repositories: filteredRepositories,
      getUserRepositories,
      searchQuery,
      filters,
      updateFilters
    }
  }
}


后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力


文章标签：
API
JavaScript
前端开发
存储
关键词：
API教程
vue3 API
API vue3
API组合式
vue3组合式API
鋜斗
目录
相关文章
1461729147809229
|
24天前
|
网络协议 API
检测指定TCP端口开放状态免费API接口教程
此API用于检测指定TCP端口是否开放，支持POST/GET请求。需提供用户ID、KEY、目标主机，可选指定端口（默认80）和地区（默认国内）。返回状态码、信息提示、检测主机、端口及状态（开放或关闭）。示例中ID和KEY为公共测试用，建议使用个人ID和KEY以享受更高调用频率。
1461729147809229
42 14
1461729147809229
|
27天前
|
API 网络安全
发送UDP数据免费API接口教程
此API用于向指定主机发送UDP数据，支持POST或GET请求。需提供用户ID、密钥、接收IP及端口、数据内容等参数。返回状态码和信息提示。示例中含公共ID与KEY，建议使用个人凭证以提高调用频率。
1461729147809229
45 13
1461729147809229
|
27天前
|
网络协议 API 网络安全
发送TCP数据免费API接口教程
此API用于向指定主机发送TCP数据，支持POST/GET请求，需提供用户ID、KEY、接收IP、端口及数据内容。返回状态码和信息提示，示例如下：{"code":200,"msg":"发送成功！"}。详情见：https://www.apihz.cn/api/datacstcp.html
1461729147809229
36 11
1461729147809229
|
1月前
|
API
历史上的今天免费API接口教程
该接口用于获取历史上的今天发生的事件，支持随机获取记录，数据同步自百度历史上的今天。请求方式为POST或GET，需提供用户ID和KEY，可选指定查询的具体日期。返回数据包括事件标题、年份、月份、日、关键词及百度百科链接。示例请求和响应详见文档。
1461729147809229
65 12
1461729147809229
|
25天前
|
API
获取网页状态码[可指定地域]免费API接口教程
该接口用于获取指定网址的访问状态码，支持从国内、香港、美国等地域节点访问。通过POST或GET请求，需提供用户ID、KEY及目标网址等参数。返回结果包括状态码和信息提示。 示例：https://cn.apihz.cn/api/wangzhan/getcode.php?id=88888888&key=88888888&type=1&url=www.apihz.cn。
1461729147809229
32 6
1461729147809229
|
26天前
|
API
诸葛神签免费API接口教程
该接口用于随机获取一支诸葛神签，共100签。通过POST或GET请求至https://cn.apihz.cn/api/mingli/zhuge.php，需提供用户ID和KEY。返回结果包括状态码、消息内容、签文图片、序号、吉凶及解签。示例中ID与KEY为公共使用，建议使用个人ID与KEY以提高调用频率。
1461729147809229
39 7
1461729147809229
|
26天前
|
API
观音灵签免费API接口教程
该API提供观音灵签的随机获取服务，含100签，支持POST/GET请求。需用户ID和KEY认证。返回签文、解曰、典故等信息。示例请求：https://cn.apihz.cn/api/mingli/guanyin.php?id=88888888&key=88888888。详情参见官方文档。
1461729147809229
34 7
1461729147809229
|
25天前
|
缓存 算法 API
查询域名WHOIS信息免费API接口教程
该API用于查询顶级域名的WHOIS信息，不支持国别域名和中文域名。通过POST或GET请求，需提供用户ID、KEY及待查询域名。返回信息包括域名状态、注册商、时间等详细数据。示例与文档见官网。
1461729147809229
48 5
1461729147809229
|
26天前
|
API
周公解梦免费API接口教程
该接口提供数万个解梦数据，支持通过用户ID、用户KEY和关键词查询梦的解析。支持POST/GET请求，返回状态码、消息内容、结果集等信息。示例请求地址：https://cn.apihz.cn/api/mingli/zhougong.php?id=88888888&key=88888888&word=捞鱼。返回数据包括梦的标题、内容等。
1461729147809229
37 6
1461729147809229
|
25天前
|
API
icp备案查询免费API接口教程
该接口用于查询指定域名的ICP备案信息，支持POST或GET请求方式。请求时需提供用户ID、用户KEY及待查询的域名，可选参数为查询通道。响应中包含状态码、消息内容、备案号、备案主体、域名及审核时间等信息。示例中提供了GET和POST请求方式及返回数据样例。
1461729147809229
77 4

热门文章

最新文章

  • 1
    小红书详情API接口的获取与应用
  • 2
    Python调用API接口的方法
  • 3
    实时获取小红书详情 API 数据
  • 4
    淘宝实时 API 接口丨淘宝商品详情接口（Taobao.item_get）
  • 5
    基于百炼平台qwen-max的api 打造一套 检索增强 图谱增强 基于指令的智能工具调用决策 智能体
  • 6
    GLM-4V-Flash：智谱 AI 免费开放的图像理解大模型 API 接口
  • 7
    基于百炼平台qwen-max的api 打造一套 检索增强 图谱增强 智能工具调用决策的智能体
  • 8
    API 数据接口使用与安全指南
  • 9
    使用Zabbix API
  • 10
    API接口是什么？(一篇文章全知道)
  • 1
    vue中使用echarts绘制双Y轴图表时，刻度没有对齐的两种解决方法
    511
  • 2
    在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
    181
  • 3
    WEB前端三大主流框架：React、Vue与Angular
    314
  • 4
    循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示
    79
  • 5
    前端核心框架Vue指令详解
    45
  • 6
    Vue项目使用ECharts实现图表
    89
  • 7
    如何在vue添加echarts图表
    87
  • 8
    使用Vue+ ECharts进行动态图表展示
    273
  • 9
    Vue引入Echarts图表的使用
    83
  • 10
    探索前端开发框架：React、Angular 和 Vue 的对决(四)
    87

    • 相关课程

    更多
  • React 入门教程开发文档
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战

    • 相关电子书

    更多
  • Spring Boot2.0实战Redis分布式缓存
  • CUDA MATH API
  • API PLAYBOOK

    • 相关实验场景

    更多
  • 基于Assistant Api的旅游助手
  • 快速体验智能体API应用
    • 下一篇
    DataWorks售前咨询