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

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（）在客户端处理，但是asyncData（）部分在服务器端处理Nuxt（）一次，然后在客户端再次处理。

nuxt的最大优点是它能够在服务器端呈现内容。如果您在客户端使用promise加载内容，例如在mounted部分中说：

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

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

javascript代码将按原样发送给客户端，浏览器负责运行Promise从api获取数据。但是，如果将promise放在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每次加载页面组件之前都会调用，并且仅适用于此类。它将在服务器端调用一次（在对 Nuxt 应用程序的第一个请求时）和客户端在导航到更多路由时调用。此方法接收context对象作为第一个参数，您可以使用它来获取一些数据并返回组件数据。

asyncData 的结果将与数据合并。

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