前言：nuxt提供asyncData 和 fetch ，但是初学者会混乱，到底用哪个？怎么用？之类的问题。下面就详细说一下

一、asyncData

在官网也说了asyncData是页面组件使用的，也就是components目录下的.vue组件是不可以使用的（使用了不执行代码也不报错），所以总结一下。pages下面的.vue文件（也就是页面组件）使用asyncData来请求接口数据。

但是要注意一点，asyncData中不可以使用this。
我们可以这样用：

<template>
  <div>
    <News />
    <ul>
        <li v-for='item in list' :key='item.id'>
            {{ item.imageName }}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data () {
    return {
        list:[],
        items:[]
    }
  },
  async asyncData( {$axios} ){
    let res = await $axios.get('http://testapi.xuexiluxian.cn/api/slider/getSliders');
    let list = res.data.data.list;
    return {
        list
    }
  }
}
</script>

二、fetch

fetch是页面组件和components目录中的组件都可以用，但是页面组件不会用的，都是在components里面去用的，你可以直接请求接口然后渲染数据。

注意：fetch中可以使用this

<template>
    <div>
        这是news
        <ol>
            <li v-for='item in items' :key='item.id'>
                {{item.imageName}}
            </li>
        </ol>
    </div>
</template>
<script type="text/javascript">
export default{
    data () {
        return {
            items:[]
        }
    },
    async fetch(  ){
        let res = await this.$axios.get('http://testapi.xuexiluxian.cn/api/slider/getSliders');
        let items = res.data.data.list;
        this.items = items;
    }
}
</script>

上面的代码，是直接请求接口渲染数据的。但是正常使用是组件请求接口把数据给vuex状态树，然后再做其他操作。