vue3.0中setup定义的变量,获取到后台以后改变变量的值

前言：

       vue3.0中我们setup是可以定义一个变量，然后return发送出来，页面用{{}}直接获取，但是我们请求后台获取数据以后是需要改我们初始化定义的字段的，这种情况下应该怎么做呢，这里分享下我的经验

目录

1、分享源码，

template:

js中：

2、查找网上相关资料

这里是两种，一种是ref的方法，一种是reactive  ，这两种我个人感觉怪的地方，一个是如果换成对象，并且是好几层的话，他的 .value方法不是很友好，而且第一种的ref方法，如果被用来做数据联动，感觉不太合适

---

1、分享源码，

template:

<ul>
    <li>我是从后台拿到的值：</li>
    <li>城市：{{pageData.list.cityName}}</li>
    <li>学校：{{pageData.list.schoolName}}</li>
    <li>姓名：{{pageData.list.teacherName}}</li>
  </ul>

js中：

setup (props, ctx) {
    //页面上的数据
    let pageData = reactive({
      list:{}
    })



    //请求后台
    let params = {
    }

    proxy.$api.user.getUerInfo(params).then(res=> {
      let code = trimNumber(res.data.code)
      if (code === 200) {
        let datas = res.data.data
        pageData.list = datas
      }
    })


    return {
      //数据
      pageData

    }

2、查找网上相关资料

这里是两种，一种是ref的方法，一种是reactive  ，这两种我个人感觉怪的地方，一个是如果换成对象，并且是好几层的话，他的 .value方法不是很友好，而且第一种的ref方法，如果被用来做数据联动，感觉不太合适

 setup() {
        const aLoading = ref<boolean>(false)
        let apps = reactive<Array<any>>([])
        const getAllApp = () => {
            aLoading.value = true
            queryAll()
                .then((response: any) => {
                    if (response.content.length > 0) {
                        apps = response.content
                    }
                    console.log(apps) // Array(2) // 值是拿到了的
                }).catch(error => {
                    console.debug(error)
                }).finally(() => {
                    aLoading.value = false
                })
        }
        onMounted(() => {
            getAllApp()
        })

        return {
            aLoading,
            apps,
        }
    },