快捷導(dǎo)航

Vue3中reactive丟失響應(yīng)式的問題解決(避大坑!)

更新時間：2023年07月27日 15:51:15 作者：喝西瓜汁的兔嘰Yan

這篇文章主要給大家介紹了關(guān)于Vue3中reactive丟失響應(yīng)式的問題解決,vue3中reactive定義的引用類型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式 ,需要的朋友可以參考下

reactive丟失響應(yīng)式的情況1（直接賦值）

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

大錯特錯?。?！

reactive丟失響應(yīng)式的情況2（解構(gòu)賦值）

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

大錯特錯?。。?/p>

了解響應(yīng)式

1.ref 定義數(shù)據(jù)（包括對象）時，都會變成 RefImpl(Ref 引用對象) 類的實例，無論是修改還是重新賦值都會調(diào)用 setter，都會經(jīng)過 reactive 方法處理為響應(yīng)式對象。
2.但是 reactive 定義數(shù)據(jù)（必須是對象），是直接調(diào)用 reactive 方法處理成響應(yīng)式對象。如果重新賦值，就會丟失原來響應(yīng)式對象的引用地址，變成一個新的引用地址，這個新的引用地址指向的對象是沒有經(jīng)過 reactive 方法處理的，所以是一個普通對象，而不是響應(yīng)式對象。解構(gòu)同理。

避坑辦法：

避開直接賦值和結(jié)構(gòu)，reactive直接包裹一個對象。

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

簡單數(shù)據(jù)類型使用ref()來進(jìn)行定義。

拔高：TS對reactive里對象進(jìn)行限制

上面那種情況是沒在TS限制的情況下我們解決的，但是有TS用戶就有疑問了，這樣我在reactive內(nèi)部再定義一個對象，就失去了對userData的類型限制了，怎么辦呢？

答案：寫類?。。。。。。。。。。。。。。。。。。?/p>

下面我們就來研究一下：

1.我們最開始會可能這樣對data加上類型限制：

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

實現(xiàn)：分開寫類！?。。。。。。。。?！(重點來啦)

1.單獨拿出來一個ts文件,比如user.ts

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

在對應(yīng)的.vue文件中引入該類。

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