vue.js - Nuxt和vue中的Data()VS asyncData()

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

最佳答案

最简单的答案是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返回的结果将与数据中的内容合并。它不会被替换，而是会合并。

关于vue.js - Nuxt和vue中的Data()VS asyncData()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53569137/