Nuxt中的Data()与asyncData() (&V)

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加载您的内容，例如，在已装载部分中如下所示：

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方法，允许您在设置component data__之前处理异步操作。

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

来自asyncData的结果将是合并的和数据。

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

Answer 3

Nuxt的主要吸引力是服务器端渲染部分，这有助于搜索引擎优化。因此，我们可以假设任何偏离正常" Vue -way“的行为都很可能是因为它服务于SSR (Vue自然不允许，因此我们使用Nuxt)。知道了这一点，我们几乎可以说asyncData()包含了在第一个页面加载时发送的针对搜索引擎优化的数据。

Short answer =>使用asyncData()获取基于模板的搜索引擎优化重点内容。