asyncData和nuxt js中的方法有什么区别?

JavaScript Vue.js

LEY理查德

2020-03-24

我目前使用

  • asyncData 用于获取api数据,但只能在页面中使用(不适用于组件)。
  • 但是方法可以用在页面和组件中

这两种方法的工作方式相同,因此,我正在考虑使用获取api数据的方法。所以我想知道asyncData和method之间有什么重要意义吗?

export default {
  async asyncData ({ req }) {
    let { data } = await axios.get(process.env.API_SERVER + `/v1/projects`)
    return { items: data }
  },
  data () {
    return {
      items: null
    }
  },
  methods: {
    async getItems () {
       let { data } = await axios.get(process.env.API_SERVER + `/v1/projects`)
       this.items = data
    }
  }

第3491篇《asyncData和nuxt js中的方法有什么区别?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
泡芙 2020.03.24

有很大的不同:

asyncData 是一种在初始化组件之前以及因此在设置组件数据之前自动调用的方法。

因此,您将无法this在自己的方法中获得喜欢。

asyncData对于服务器端渲染很重要,在服务器端渲染中,您想先使用组件中的数据对数据进行渲染,然后再获取数据。Nuxt将等到获取数据后再进行初始化,然后渲染组件。否则它将被清空。

初始化组件时,方法首先可用。

您可以在文档中找到有关asyncData的更多信息,并对其进行了很好的描述。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android