場(chǎng)景:
1.你定義了一個(gè)數(shù)據(jù):let data=reactive({
          name:"",
          age:""
})
2.然后你請(qǐng)求了接口，賦值給data
let res=await getUserApi();  //請(qǐng)求接口
data=res.data;                     //將返回的結(jié)果賦值給data

場(chǎng)景:
1.你定義了一個(gè)數(shù)據(jù):let data=reactive({
          name:"",
          age:""
})
2.然后你解構(gòu)了
let {name}=data; //解構(gòu)賦值

let data=reactive({
    userData:{}        //里面定義一個(gè)對(duì)象，這樣賦值就不會(huì)丟失響應(yīng)式了。
})
 
//獲取接口數(shù)據(jù)
let res=await getUserApi();  //請(qǐng)求接口
data.userData=res.data;      //將返回的結(jié)果賦值給data

interface dataRule{
    name:string,
    age:number
}
//定義數(shù)據(jù)
let data:dataRule=reactive({
    name:"",
    age:""
})
//但是，當(dāng)獲取接口的時(shí)候
let res=await getUserApi();  //請(qǐng)求接口
//data=res.data;              //我們已經(jīng)知道不能這樣寫(xiě)了，會(huì)丟失響應(yīng)式。(xxx達(dá)咩)
//2.這時(shí)聰明的你可能會(huì)這樣
data.name=res.data.name;
data.age=res.data.age;
//PS:
//問(wèn)題一：賦值太麻煩
//這樣確實(shí)可以不損壞響應(yīng)式，但是如果我說(shuō)你這里面不僅僅有name和age呢，而是有很多很多，那咋辦？
//問(wèn)題二:無(wú)法對(duì)userData做類型限制
//你可能又想這樣:
let data=reactive({
     userData:{}  
})
這樣寫(xiě)，我們?cè)趺茨軐?duì)userData做類型限制呢？

//1.定義限制userData的接口
export interface dataRule{
    name:string,
    age:number
}
//寫(xiě)類
export class data{
    //定義userData并且做TS限制和賦初始值
    userData:dataRule={
        name:"",
        age:""
    }
}

//1.引入剛寫(xiě)好ts類文件
import {dataRule,data} from "@/type/user.ts"
//2.重點(diǎn)來(lái)了，我實(shí)例化出來(lái)data,然后用一個(gè)變量User接收。
let User=reactive(new data());
/*
//實(shí)例化出來(lái)以后相當(dāng)于這樣的結(jié)構(gòu):
User={
    userData:{
        name:"",
        age:""
    }
}
*/
//3.我們調(diào)用接口
//獲取接口數(shù)據(jù)
let res=await getUserApi();  //請(qǐng)求接口
User.userData=res.data;      //將返回的結(jié)果賦值給data,這樣也不會(huì)丟失響應(yīng)式，并且userData也受了TS的限制。