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

Posted 2023-02-22

【中文标题】Nuxt 和 vue 中的 Data() VS asyncData()

【英文标题】：Data() VS asyncData() in Nuxt & vue

【发布时间】：2019-05-03 07:03:27

【问题描述】：

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

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

【讨论】：

所以@merhawi-fissehaye 我需要做什么才能拥有从服务器调用一些api的简单按钮？那东西存在吗？

非常感谢！你能解释一下负责在服务器上获取数据的代码在哪里吗？例如，如果我在前端运行 Nuxt，在后端运行一些 php 框架，我是否必须在后端运行一些 javascript 才能使 s-s-r 工作？

@AhmadMobaraki 您可以使用 PHP 编写后端代码并从 asyncData 中调用 api。 s-s-r 刚刚好。你不需要做任何额外的事情。

【参考方案2】：

您可能想要获取数据并将其呈现在服务器端。 Nuxt.js 添加了一个asyncData 方法，让您在设置组件data 之前处理异步操作。

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

asyncData 的结果将与数据合并。

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

【讨论】：

所以，当我必须使用 data() 而不是 asyncData() 时

@xxyy asyncData 用于在页面加载之前需要的数据。例如。它会等待 http 请求完成，然后才能真正呈现与数据不同的页面

所以假设我有多个页面，每个页面发送 30 个项目，当我添加一个按钮转到第 2 页时，我应该手动调用 asyncdata 还是应该执行 nuxt-link

【参考方案3】：

Nuxt 的主要吸引力在于服务器端渲染部分，它有助于 SEO。所以我们可以假设任何偏离正常“Vue 方式”的做事很可能是因为它服务于 s-s-r（Vue 自然不允许，因此我们使用 Nuxt）。知道了这一点，我们几乎可以说 asyncData() 包含在第一个页面加载时发送的以 SEO 为中心的数据。

简答 => 使用 asyncData() 获取基于模板的以 SEO 为重点的内容。