data()
とasync data()
はどちらも同じ結果になります(asyncData()
の結果がdata()
の結果をオーバーライドすることは明らかです)
どちらもソースコードにHTMLコードになります(つまり、サーバー側でレンダリングされたコード)。
また、両方を使用して、フェッチするデータを "await
"することもできます(例:axiosを使用)
では、それらの違いは何ですか?
<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>
結果:
test: asyncData
test2: asyncData2
test2: asyncData3
test2: data4
最も簡単な答えはdata()がクライアント側で処理されることですが、asyncData()セクションはサーバー側でNuxt()の呼び出しで1回、クライアント側でもう一度処理されます。
Nuxtの最大の利点は、サーバー側でコンテンツをレンダリングできることです。クライアント側でpromiseを使用してコンテンツをロードする場合、たとえば、mountedセクションで次のように言います。
data() {
return {
products: []
}
},
mounted() {
axios.get('/api/v1/products').then(response => {
this.products = response.data
})
}
javaScriptコードはそのままクライアントに送信され、ブラウザはAPIからデータをフェッチするプロミスを実行する責任があります。ただし、asyncData内にpromiseを配置した場合:
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 }
})
}
データのフェッチはサーバー側で行われ、結果は事前にレンダリングされ、データを含むhtmlがクライアントに送信されます。したがって、この場合、クライアントはそれ自体でapi呼び出しを処理するJavaScriptコードを受信しませんが、代わりに次のようなものを受信します。
<ul>
<li>
<a href="#">Product 1</a>
</li>
<li>
<a href="#">Product 2</a>
</li>
<li>
<a href="#">Product 3</a>
</li>
</ul>
AsyncDataから返す結果は、データの内容とマージされます。置き換えられずにマージされます。
データをフェッチしてサーバー側でレンダリングしたい場合があります。 Nuxt.js
は、コンポーネントを設定する前に非同期操作を処理できるasyncData
メソッドを追加しますdata
。
asyncData
はpageコンポーネントをロードする前に毎回呼び出され、そのような場合にのみ使用できます。 (Nuxtアプリへの最初のリクエストで)サーバー側で1回呼び出され、さらにルートに移動するときにクライアント側で呼び出されます。このメソッドは最初の引数としてcontext
オブジェクトを受け取ります。これを使用して、データをフェッチし、コンポーネントデータを返すことができます。
AsyncDataの結果はmerged with dataになります。
export default {
data () {
return { project: 'default' }
},
asyncData (context) {
return { project: 'nuxt' }
}
}