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

Question

<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>

Answer 1

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