Nuxt 和 vue 中的 Data() VS asyncData()

Both data() and 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>

result:

test:  asyncData
test2: asyncData2
test2: asyncData3
test2: data4

最简单的答案是 data() 在客户端处理，但是 asyncData() 部分在调用 Nuxt() 时在服务器端处理一次，并在客户端再次处理。

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 被发送到客户端。因此，在这种情况下，客户端不会收到 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 返回的结果与 data 中的内容合并。它不是被替换而是合并。