Question

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

Answer 1

最简单的答案是在客户端上处理data（），但是在调用Nuxt（）时一次在服务器端处理asyncData（）部分，然后在客户端再次处理。

nuxt的最大优点是它能够在服务器端呈现内容。如果您在客户端使用Promise加载内容，请在已安装的部分中将示例说为：

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

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

JavaScript代码按原样发送到客户端，浏览器负责运行Promise从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发送到客户端。因此，在这种情况下，客户端将不会接收用于自行处理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返回的结果与数据中的内容合并。它不会被替换而是被合并。

Answer 2

您可能希望获取数据并将其呈现在服务器端。 Nuxt.js添加了一个asyncData方法，可让您在设置组件data之前处理异步操作。

asyncData每次在加载 page 组件之前都会被调用，并且仅对此可用。导航到其他路由时，它将一次称为服务器端（在对Nuxt应用程序的第一个请求时），而在客户端称为一次。此方法将context对象作为第一个参数，您可以使用它来获取一些数据并返回组件数据。

asyncData的结果将与数据合并。

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

Nuxt和vue中的Data（）VS asyncData（）

2 个答案: