vue3中readonly家族(系列十二)

2022-06-17 20:30:14 字數 726 閱讀 1649

利用readonly封裝資料,遞迴唯讀

}}}

"myfn

">按鈕

列印情況

點選按鈕,儘管重新賦值了資料,但是並沒有更改資料,所以只能是唯讀的,並且是遞迴唯讀,層級深的資料也是沒有變化。而且頁面並沒有跟新

利用shallowreadonly封裝資料,非遞迴唯讀

}}}

"myfn

">按鈕

列印效果

此時,只對最外層資料name屬性有唯讀效果,內層的資料都改變了,非遞迴唯讀,頁面同樣也是未發生更新 

關於isreadeonly,以及readonly和const區別

}}}

"myfn

">按鈕

注,對於readonly和shallowreadonly封裝的資料,重新修改資料,它的isreadonly都是true

const 對於普通資料,重新賦值,會報錯, 對於引用資料的資料修改,他是正常修改的,因為引用資料的記憶體位址沒有發生改變

vue3中使用reactive替代vuex

在vuex用於存放公用的資料和方法,並且資料改變可以實現檢視更新。但是使用也是很麻煩同步的要使用mutations,非同步的要使用actions,而且只能通過commit來更新資料。下面來實現這樣乙個常見功能,登入的時候儲存使用者名稱,在內容頁的頭部顯示使用者名稱 user.ts用來存放user資料...

快速了解vue(3)

上次我們說到了.vue檔案,那麼這是個什麼檔案呢?啥也不是,就是個vue元件。我們都說要元件化,模組化什麼的,這.vue檔案就是個元件,開啟看看就知道了,它這裡有兩個,主要的標籤,乙個是,乙個是。這些我們肯定看得懂,標籤裡是寫html的,頁面就是由這許許多多的元件拼出來的,就像拼圖似的,想要修改頁面...

vue3學習筆記

vue3 1.context.emit update xx props.xx 可 v model xx更新xx的值 個人記憶,雙向繫結 需要雙向改變的值 代替 vue2 sync 2.元件上繫結的事件預設是繫結第一層,可使用inheritattrs false 取消預設,在需要繼承的屬性的標籤使用v...