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

定義兩個(gè)接口，第一個(gè)接口限制對(duì)象屬性，第二個(gè)接口寫(xiě)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

下面我們可以一個(gè)例子

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

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

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

二、Ref api

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

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

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

ref的解包只是淺層解包

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

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

三、readonly api

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

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

readonly常見(jiàn)的傳入對(duì)象 

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

readonly返回的對(duì)象不允許修改，但是在readonly處理的原來(lái)的對(duì)象是允許被修改的。

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

上面的并沒(méi)有修改readonly屬性的對(duì)象，所以可以在home組件中修改。

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

總結(jié)

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

最新評(píng)論