求解答，为什么我这里使用axios请求在页面加载缓慢

<template>
  <div>
    <ul v-show="isList">
      <li v-for="t in List" :key="t.id" >
        <router-link :to="{
            path:'/home/message/detail',
            query:{
                id:t.id,
                title:t.title
            }
        }">{{t.title}}</router-link>
      </li>
    </ul>
    <h1 v-show="!isList" style="text-align:center">加载中。。。</h1>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            list:[
                {id:'001',title:''},
                {id:'002',title:''},
                {id:'003',title:''},
                {id:'004',title:''},
            ],
            isList:false
        }
    },
    computed:{
        List(){
            this.list.forEach((t) => {
                axios.get('https://v1.hitokoto.cn/').then(response => {
                    t.title = response.data.hitokoto
                })
            })
            setTimeout(()=>{
                this.isList = true//如果在这里加个1秒钟定时器就不会一个一个缓慢的加载出来了，直接呈现出整个列表，为什么呢
            },1000)
            return this.list
        }
    }
    
};
</script>

一般来说数据的请求都放在created中

还有什么比较好的方法吗

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7738694
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：关于axios的两种拦截方式：请求拦截和响应拦截
• 您还可以看一下 刘建萍老师的Web前端开发经典案例之vue框架开发电商项目百草味案例（一）课程中的 通过axios把商品分类的数据从后端获取，并且渲染小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 手把手搭建前后端开发框架中的 axios请求处理 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  创建src/api/http.js文件（可选，根据自己的情况来创建）

  • 设置请求的相应参数

  import axios from 'axios';
  axios.defaults.timeout=6000;//设置超时时间6s
  axios.defaults.retry = 4;//请求次数
  axios.defaults.retryDelay = 1000;//间隙
  axios.defaults.withCredentials=true;//允许跨域
  axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=utf-8';
  axios.defaults.baseURL = 'http://localhost:8888';//基础url,后端地址
  

  • 设置响应拦截器

  //响应拦截器
  axios.interceptors.response.use(
      response=>{  return response;},
      error => {  return Promise.reject(error);}
  );
  

  • 封装get、post方法

  目的：post、get方法，后面用的很多，可以封装起来，到时候直接传递参数来调用就可以了，减少页面代码量。

  export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
        params: params
      })
        .then(response => {
          resolve(response.data);
        })
        .catch(err => {
          reject(err)
        })
    })
  }
  export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, data)
        .then(response => {
          resolve(response.data);
        }, err => {
          reject(err);
        })
    })
  }
  
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

因为1秒，你的数据已经加载完了，改小一点也是一条一条加载的，例如100ms