没有合适的资源？快使用搜索试试~ 我知道了~

文库首页行业研究行业报告前端Vue 3 的组合 API 如何请求数据.pdf

前端Vue 3 的组合 API 如何请求数据.pdf

1.该资源内容由用户上传，如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款（资源遇到问题，请及时私信上传者）

版权申诉

vue.js

0 下载量 99 浏览量 2023-02-22 20:58:08 上传评论收藏 1.45MB PDF 举报

温馨提示

试读

25页

.【前端】Vue 3 的组合 API 如何请求数据.pdf

资源推荐

资源详情

资源评论

Vue 3 的组合 API 如何请求数据

前言

之前在学习 React Hooks 的过程中，看到一篇外网文

章，通过 Hooks 来请求数据，并将这段逻辑抽象成一

个新的 Hooks 给其他组件复用，我也在我的博客里翻

译了一下：《在 React Hooks 中如何请求数据？》，

感兴趣可以看看。虽然是去年的文章，在阅读之后一下

子就掌握了 Hooks 的使用方式，而且数据请求是在业

务代码中很常用的逻辑。

Vue 3 已经发布一段时间了，其组合 API 多少有点

React Hooks 的影子在里面，今天我也打算通过这种

方式来学习下组合 API。

项目初始化

为了快速启动一个 Vue 3 项目，我们直接使用当下最

热门的工具 Vite 来初始化项目。整个过程一气呵成，

行云流水。

打开生成的项目文件夹

cd vue3-app

安装依赖

npm install

启动项目

npm run dev

我们打开

App.vue

将生成的代码先删掉。

组合 API 的入口

接下来我们将通过 Hacker News API 来获取一些热门

文章，Hacker News API 返回的数据结构如下：

{

"hits": [

{

"objectID": "24518295",

"title": "Vue.js 3",

"url": "https://github.com/vuejs/vue-next/releases/tag/v3.0.0",

{...},

]

}

我们通过

ui > li

将新闻列表展示到界面上，新闻数据

从

hits

遍历中获取。

<ul>

<li

v-for="item of hits"

:key="item.objectID"

<a :href="item.url">{{item.title}}a>

li>

ul>

template>

import { reactive } from 'vue'

export default {

setup() {

const state = reactive({

hits: []

})

return state

}

script>

在讲解数据请求前，我看先看看

setup()

方法，组合

API 需要通过

setup()

方法来启动，

setup()

返回的数

据可以在模板内使用，可以简单理解为 Vue 2 里面

data()

方法返回的数据，不同的是，返回的数据需要先

经过

reactive()

方法进行包裹，将数据变成响应式。

组合 API 中请求数据

在 Vue 2 中，我们请求数据时，通常需要将发起请求

的代码放到某个生命周期中（

created

或

mounted

）。在

setup()

方法内，我们可以使用 Vue 3 提供的生命周期

钩子将请求放到特定生命周期内，关于生命周期钩子方

法与之前生命周期的对比如下：

生命周期

可以看到，基本上就是在之前的方法名前加上了一个

，且并没有提供

onCreated

的钩子，因为在

setup()

内执行就相当于在

created

阶段执行。下面我们在

mounted

阶段来请求数据：

import { reactive, onMounted } from 'vue'

export default {

setup() {

const state = reactive({

hits: []

})

onMounted(async () => {

const data = await fetch(

'https://hn.algolia.com/api/v1/search?query=vue'

).then(rsp => rsp.json())

state.hits = data.hits

})

return state

}

最后效果如下：

剩余24页未读，继续阅读

评论收藏

内容反馈

1.该资源内容由用户上传，如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款（资源遇到问题，请及时私信上传者）

版权申诉

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

春哥111

粉丝: 1w+

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

前端Vue 3 的组合 API 如何请求数据.pdf

Vue.js前端开发 PDF

Vue SSR和API Proxy实践.pdf

Spring Boot Vue前后端分离开发实战.pdf

Vue 进阶实战培训.pdf版

Vue.js 3.0 API 官方手册 中文pdf版(含源码).zip

我如何使用 Django + Vue.js 快速构建项目.pdf

vue.js教程.pdf

前端面试宝典（无Vue）.pdf

vue.js教程.docx.pdf

Springboot+VUE Web开发实践.pdf

天津IT服务行业web前端开发工程师(VUE)岗位介绍JD模板.pdf

hbuilderx vue表单填写数据写入数据库.pdf

vue.js项目实战,vue.js项目实战pdf下载,JavaScript

03-Vuejs入门到高级项目实战教程v3.1.pdf

手把手带你完成Vue+ElementUI+SpringBoot整合.pdf

Vue3基础教程-指令.pdf

Vue框架简介及快速入门.pdf

3207257-Spring Boot+Vue全栈开发实战.pdf

Vue.js 最浅显易懂的API手册.pdf

剖析 Vue.js 内部运行机制.pdf

《2025年前端最新场景题面试攻略.pdf》

微前端架构实战：Vue3+ModuleFederation最佳实践.pdf

《神奇的Vue.js.pdf》

Python+Django+vue3全栈开发商城项目.zip

vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式

vue3使用print-template生成pdfDemo

Vue3pdf中文文档

【vue学习】Vue3入门与实战.zip

[前端]PDF预览PDFJS支持IE.zip

MCU外设【3】I2C协议

y=a/(|x-b| c)

最新资源

Vue.js 3.0 API 官方手册中文pdf版(含源码).zip