Nuxt & 中的 Data() VS asyncData()视图 [英] Data() VS asyncData() in Nuxt & vue
问题描述
data() 和 async data() 都给出了相同的结果(很明显，asyncData() 的结果覆盖了data())
两者都在源代码中生成 HTML 代码(即在服务器端呈现的代码)
此外，两者都可用于await"要获取的数据(例如:使用 axios)
那么，它们之间有什么区别?
<div><div>test: {{ test }}</div><div>test2: {{ test2 }}</div><div>test2: {{ test3 }}</div><div>test2: {{ test4 }}</div><脚本>导出默认{异步数据(应用程序){返回 {测试:异步数据"，测试2:异步数据2"，测试3:异步数据3"};},数据() {返回 {测试数据"，测试2:数据2"，测试4:数据4"};},};
结果:
test: asyncData测试 2:异步数据 2测试 2:异步数据 3测试2:数据4最简单的答案是 data() 在客户端处理，但是 asyncData() 部分在调用 Nuxt() 时在服务器端处理一次并再次在客户端.
nuxt 的最大优势在于它能够在服务器端呈现内容.如果您在客户端使用 promise 加载您的内容，例如在挂载部分说:
data() {返回 {产品: []}},安装(){axios.get('/api/v1/products').then(response => {this.products = response.data})}javascript 代码按原样发送到客户端，浏览器负责运行从 api 获取数据的承诺.但是，如果您将承诺放在 asyncData 中:
asyncData() {return axios.get('/api/v1/products').then(response => {//请注意，您无法访问 asyncData 中的 `this` 实例//this.products = response.data让产品 = response.datareturn { products }//等价于 { products: products }})}数据获取在服务器端完成，结果被预渲染，一个带有数据(渲染到其中)的 html 被发送到客户端.因此，在这种情况下，客户端不会收到 javascript 代码来自行处理 api 调用，而是会收到如下内容:
<li><a href="#">产品 1</a><li><a href="#">产品 2</a><li><a href="#">产品 3</a>
我们从 asyncData 返回的结果与 data 中的内容合并.它没有被替换，而是被合并了.
Both data() and async data() gives the same result (and it is obvious that the results from asyncData() override the results from data())
and both results in HTML code in the source code (i.e the code rendered in the server-side)
also, both can be used to "await" the data to be fetched (ex: using axios)
so, what is the difference between them?
<template>
<div>
<div>test: {{ test }}</div>
<div>test2: {{ test2 }}</div>
<div>test2: {{ test3 }}</div>
<div>test2: {{ test4 }}</div>
</div>
</template>
<script>
export default {
asyncData(app) {
return {
test: "asyncData",
test2: "asyncData2",
test3: "asyncData3"
};
},
data() {
return {
test: "data",
test2: "data2",
test4: "data4"
};
},
};
</script>
result:
test: asyncData
test2: asyncData2
test2: asyncData3
test2: data4
The simplest answer is data() is processed on the client side, however asyncData() section is processed on the server side on the call for Nuxt() once and on the client side once more.
The biggest advantage of nuxt is it's ability to render content on the server side. If you load your content using promise on the client side, say for example in the mounted section as:
data() {
return {
products: []
}
},
mounted() {
axios.get('/api/v1/products').then(response => {
this.products = response.data
})
}
the javascript code is sent to the client as it is and the browser is responsible to run the promise to fetch the data from the api. However if you put the promise inside asyncData:
asyncData() {
return axios.get('/api/v1/products').then(response => {
// Note that you can't access the `this` instance inside asyncData
// this.products = response.data
let products = response.data
return { products } // equivalent to { products: products }
})
}
The data fetching is done on the server side and the result is pre-rendered and an html with the data (rendered into it) is sent to the client. So in this case the client won't be receiving the javascript code to process the api call by itself, but instead it receives something like this:
<ul>
<li>
<a href="#">Product 1</a>
</li>
<li>
<a href="#">Product 2</a>
</li>
<li>
<a href="#">Product 3</a>
</li>
</ul>
The result we return from asyncData is merged with what is in data. It's not replaced but merged.
这篇关于Nuxt & 中的 Data() VS asyncData()视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
