《踩坑记录》vue3关于请求返回数据不刷新问题

前提：第一次接触vue3+ts的代码写法，本次错误是由于接收请求返回的变量声明方法不对，导致变量不是响应式的，虽然可以在控制台中打印出来，但是不会进行视图更新。

export default {
    components: {

    },
    setup() {
        let tabData = [] //错误的写法
        封装的请求方法({ 
            传入的参数 
        }).then((res) => {
            tabData.value = res.data //将接口返回的数据赋值给定义的变量
        }).catch(() =>{
            console.log("error")
        })
        return{
            tabData
        }
}

然后在html中使用，虽然控制台能打印出来，但是视图不会更新，尝试过各种办法，以为是因为页面渲染完之后才请求回数据，但是setup已经是最早发送请求的位置，也有尝试过异步，但是一直存疑，明明vue是数据发生变化就会自动更新视图，但是怎么就一直不更新呢，最后看到关于响应式的可能，然后尝试了一下

import { ref } from 'vue'
export default {
    setup() {
        let tabData = ref([])
        封装的请求方法({ 
            传入的参数 
        }).then((res) => {
            tabData.value = res.data //将接口返回的数据赋值给定义的变量
        }).catch(() =>{
            console.log("error")
        })
        return{
            tabData
        }
}

然后就可以了，因为上面定义的方式，tabData不是响应式的，所以渲染完之后数据无论怎么变化，视图都不会更新。通过ref包裹之后就是响应式的了，正常的数据变化就能够自动更新视图。