前言：
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,
}
},