时间戳

首页 > 解决方案 > Nuxt 和 vue 中的 Data() VS asyncData()

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

标签： vue.jsvuejs2vuexnuxt.js

解决方案

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

推荐阅读