无涯教程网

Vue.js Asyncdata 与 Fetch 的区别

发布于03月16日

fetch和异步数据之间的确切区别是什么.官方文件说:

asyncData

您可能希望获取数据并在服务器端呈现它.努克斯.js

每次加载组件之前都会调用asyncData(仅适用于

Fetch

fetch方法用于在呈现页面之前填充存储，它是

fetch方法接收上下文对象作为第一个参数，我们

Fetch是用来用数据填充存储的吗？但在asyncData中，这也可以通过存储提交吗？我不明白为什么有两种治疗方法.

这两种方法都在初始加载时在服务器端运行，之后当您浏览应用程序时，它在客户端运行.

有人能给我解释一下使用这些方法的优势吗？

谢谢你的帮助.

推荐答案

让我重复几点，作为我要说的话的借口

asyncData可以设置组件级对象并访问vuex存储
fetch无法设置组件级对象，但可以访问vuex store
asyncData&；fetch将在初始加载期间在服务器端触发
初始加载后，当调用相应的页面路由时，将触发asyncData和fetch

1) if your design is

将vuex store用作中央存储库
访问整个应用程序的vuex存储区中的数据

然后use fetch

2) if your design is

将vuex store用作中央存储库
具有设置组件级对象的选项
在特定路由中获取的数据仅由单个组件使用
需要灵活性才能拥有vuex存储或设置组件级对象的权限

然后use asyncData

有人能给我解释一下使用这些方法的优点吗

我认为使用asyncData或fetch没有任何缺点

Select asyncData或fetch完全取决于您的架构

Update for NuxtJS >= 2.12

Several points mentioned in the answer no longer apply when using newer NuxtJS versions (>= 2.12). Official RFC announcement here.

NuxtJS官方博客上的这post篇文章很好地解释了asyncData和fetch之间的新行为和差异.

至于两者之间的 Select ，我相信最初的答案仍然适用:

我认为使用asyncData或fetch没有任何缺点

Select asyncData或fetch完全取决于您的架构

Vue.js相关问答推荐

Vuetify 3 v-radio-group 将模型设置为 null

Nuxt3 / Vue3 - 当属性更改时如何动态更改渲染组件？

如何通过 setup() 发出多个参数？

如何在Typescript语言Vuejs中使用watch功能？

Vue：需要禁用页面上的所有输入

[Vue 警告]：渲染函数中的错误：TypeError：无法读取属性 'first_name' of null

未捕获的类型错误：无法读取未定义的属性initializeApp

在按键 vuejs 中只允许数字和一个小数点后 2 位限制

如何在 vue 3 脚本设置中的组件上使用 v-model

如何从 .vue 文件中导出多个对象

如何从 vue.js 中的自定义组件中冒泡点击事件？

如果我观看解构的props，Vue 3 手表将无法正常工作

vuejs中通过变量动态调用方法

Axios-一次发出多个请求(vue.js)

为什么 v-model 不适用于数组和 v-for 循环？

使用 Vue-cli，我在哪里声明我的全局变量？

Vue 组件中的组件渲染函数中可能存在无限更新循环警告

为什么 Vue.js 使用 VDOM？

使用 refs 聚焦元素目标

Vue 3 – 渲染无法动画的非元素根 node

实用课程推荐

相关教程推荐