Data () VS asyncData () в Nuxt & vue - PullRequest
Новая
       71

Data () VS asyncData () в Nuxt & vue

0 голосов
/ 01 декабря 2018

и 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

Ответы [ 2 ]

0 голосов
/ 02 декабря 2018

Самый простой ответ - data () обрабатывается на стороне клиента, однако раздел asyncData () обрабатывается на стороне сервера при вызове Nuxt () один раз и еще раз на стороне клиента.

Самым большим преимуществом nuxt является его способность отображать контент на стороне сервера.Если вы загружаете контент с помощью обещания на стороне клиента, например, в смонтированном разделе произнесите следующее: 

data() {
  return {
    products: []
  }
},

mounted() {
  axios.get('/api/v1/products').then(response => {
    this.products = response.data
  })
}

код javascript отправляется клиенту как есть, и браузер отвечает за выполнение обещаниячтобы получить данные из API.Однако, если вы помещаете обещание в 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 }
  })
}

Выборка данных выполняется на стороне сервера, а результат предварительно обрабатывается, а HTML-код с данными (отображаемыми в нем) отправляется клиенту.,Таким образом, в этом случае клиент не будет получать код javascript для самостоятельной обработки вызова API, но вместо этого он получает что-то вроде этого: 

<ul>
  <li>
    <a href="#">Product 1</a>
  </li>
  <li>
    <a href="#">Product 2</a>
  </li>
  <li>
    <a href="#">Product 3</a>
  </li>
</ul>

Результат, который мы возвращаем из asyncData, объединяется с тем, чтов данных.Он не заменен, а объединен.

0 голосов
/ 01 декабря 2018

Возможно, вы захотите получить данные и отобразить их на стороне сервера.Nuxt.js добавляет метод asyncData, который позволяет обрабатывать асинхронные операции перед установкой компонента, data.

asyncData вызывается каждый раз перед загрузкой компонента page и является толькодоступно для таких.Он будет вызываться на стороне сервера один раз (при первом запросе к приложению Nuxt) и на стороне клиента при переходе к дальнейшим маршрутам.Этот метод получает объект context в качестве первого аргумента, вы можете использовать его для извлечения некоторых данных и возврата данных компонента.

Результат от asyncData будет объединен с данными. 

export default {
  data () {
    return { project: 'default' }
  },
  asyncData (context) {
    return { project: 'nuxt' }
  }
}
...