web-dev-qa-db-ja.com

NuxtのData（）VS asyncData（）＆vue

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
vue.jsvuejs2vuexnuxt.jsnuxt
4
xx yy

最も簡単な答えは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から返す結果は、データの内容とマージされます。置き換えられずにマージされます。

14
Merhawi Fissehaye

データをフェッチしてサーバー側でレンダリングしたい場合があります。 Nuxt.jsは、コンポーネントを設定する前に非同期操作を処理できるasyncDataメソッドを追加しますdata。

asyncDataはpageコンポーネントをロードする前に毎回呼び出され、そのような場合にのみ使用できます。 （Nuxtアプリへの最初のリクエストで）サーバー側で1回呼び出され、さらにルートに移動するときにクライアント側で呼び出されます。このメソッドは最初の引数としてcontextオブジェクトを受け取ります。これを使用して、データをフェッチし、コンポーネントデータを返すことができます。

AsyncDataの結果はmerged with dataになります。

export default {
  data () {
    return { project: 'default' }
  },
  asyncData (context) {
    return { project: 'nuxt' }
  }
}
3
Ismoil Shifoev