vue3+TS reactive設(shè)定類型

定義兩個接口，第一個接口限制對象屬性，第二個接口寫Data屬性

interface User {
  username: string | null;
  age: number | null;
  sex: string | null;
}

interface Userdata {
  data: [User];
}

const userList = reactive<Userdata>({
  data: [
    {
      username: null,
      age: null,
      sex: null,
    },
  ],
});

vue中的Reactive,ref,readonly

一、Reactive api

下面我們可以一個例子

如圖所示，當(dāng)我們點擊button按鈕的時候，是沒有響應(yīng)式效果的，此時我們需要reactive api。

那么這是什么原因呢？為什么就可以變成響應(yīng)式的呢：

因為當(dāng)我們使用reactive函數(shù)處理我們的數(shù)據(jù)之后，數(shù)據(jù)再次被使用時就會進(jìn)行依賴收集，當(dāng)數(shù)據(jù)發(fā)生改變時，所有收集到的依賴都是進(jìn)行對應(yīng)的響應(yīng)式操作，我們編寫的data選項，也是在內(nèi)部交給了reactive函數(shù)將其編程響應(yīng)式對象的。

二、Ref api

reactive api對傳入的類型是有限制的，要求我們必須傳入一個對象或者數(shù)組，但是如果我們傳入基本數(shù)據(jù)類型的話，會報一個警告（String, Number, Boolean）。

在template模板中，vue會自動幫助我們解包，所以我們不需要使用ref.value進(jìn)行操作。

但是在setup內(nèi)部，vue不會幫助我們進(jìn)行解包操作，此時我們需要使用ref.value 

ref的解包只是淺層解包

如上述兩張圖所示，第一張圖，在ref對象外層嵌套了一層普通對象，此時在template中就必須加上value才可以訪問。

在下面使用reactive對象進(jìn)行嵌套，此時不需要加value也可以訪問。 

三、readonly api

我們通過reative和ref獲取的響應(yīng)式對象，但是在某一些情況下，我們希望這樣數(shù)據(jù)可以傳給其他組件，此時這些數(shù)據(jù)不能被修改，所以我們使用readonly函數(shù)。

readonly函數(shù)傳入對象后，返回結(jié)果為代理對象(proxy對象，該對象的set方法被劫持，不能進(jìn)行修改)。

readonly常見的傳入對象 

• 類型一:普通對象
• 類型二:reactive返回的對象
• 類型三:ref返回的對象

readonly返回的對象不允許修改，但是在readonly處理的原來的對象是允許被修改的。

readonly對象的本質(zhì)是：readonly對象的返回結(jié)果的setter被劫持。

上面的并沒有修改readonly屬性的對象，所以可以在home組件中修改。

如上圖所示使用readonly屬性的就不可以進(jìn)行更改。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論