解决：vue3使用axios返回json用v-for遍历失效，标签不渲染

遇到vue用axios请求后端json对象，发现vue页面对应的v-for标签怎么都不渲染。

首先控制台打印数据正常，以为错误出现在生命周期钩子上面。
axios请求在dom渲染之后，但是一顿操作之后还是没有用。

参考了很多种方法，
第一种就是在v-for外面包一层v-if，判断收到的数据不为空才显示。

        <div v-if="list.length != 0">//判断不为空
        <div class="list" :key="index"  v-for="item,index in list">
            <div class="body">
                <div class="img">

结果还是失败。究其本身他v-for本身不渲染，判断是否为空并没有什么意义。

第二种，使用setTimeout延迟加载axios。
仍然未果…

然后不断的找不断地调试，最后解决了问题。
axios请求过来的json对象打印为数组，一开始我是用的ref()变为响应式，但是数组应该在定义初始化的时候用reactive。

const list = reactive([]) as any[];

加as any[] 是因为用ts会报错。
使用axios获取到result对象之后，取得result.data的对应的json对象，通过foreach遍历然后把每一个对象数组push到自己定义的响应式数组中。不能直接赋值，比如说list = res.data。
具体代码：（这里的axios我是封装过后的）

const list = reactive([]) as any[];//现在setup中定义
onMounted(()=>{
    axios.getList(‘url’).then(res=>{
            res.data.forEach((element: any) => {
                list.push(element);//循环赋值
            });
            console.log(list)
    })    
})

然后就可以用v-for遍历再用{{}}取值显示了。
中途还用过好多方法，可惜都没用。