Vue3 0的遞迴監聽和非遞迴監聽

2021-10-25 08:12:28 字數 1894 閱讀 6902

監聽的意思就是資料雙向繫結,檢視根據資料變化

遞迴監聽

預設情況下,無論是使用ref和reactive都是遞迴監聽,但是如果資料量非常大的話,就特別消耗效能
不信的話,我舉個例子

對吧,內部每個都做了遞迴,尤大佬給我們提供了乙個方法,避免這樣

非遞迴監聽

shallowreactive:第一層資料如果不該變的話,檢視不會更新
**

只有第一層發生了遞迴監聽,當我們第一層資料沒改變的時候,下面層的資料改變了是不會更新我們的ui檢視的

shallowref:shallowref建立的資料,vue監聽的是.value的變化,並不是第一層的變化

import  from "vue";

setup() ,

},},

});//必須這樣修改

state.value = ,

},},};}

但是我們就想修改某一層的值怎麼辦?這樣即可

import  from "vue";

state.value.gf.f.s.d = '4';

triggerref(state)

注意:vue3只提供了triggerref,所以如果是reactive型別的資料,是無法主動觸發頁面更新的

再說明下ref和reactive

ref

1.ref也是響應式資料方法,ref可以實現對簡單值的監聽,字串,數字等

2.ref底層的本質其實還是reactive,系統會自動根據我們給ref傳入的值將

它轉換成ref(xx) ->reactive()

3.在vue中使用ref的值不用通過value獲取,在js中使用ref的值必須通過value獲取

reactive

1.reactive是vue3中提供的實現響應式資料的方法

2.vue2響應式資料是通過defineproperty,vue3是通過es6的proxy實現

3.reactive引數必須是物件或者陣列

這倆區別

1.如果在template裡使用的是ref型別的資料,那麼vue會自動幫我們新增.value

2.如果在template裡使用的是reactive型別的資料,那麼vue不會自動幫我們新增.value

3.vue內部根據乙個v_isref屬性來判斷的,ref的v_isref屬性為true,reactive就沒有這個屬性

vue3 0 和 2 0的差異

vue cli2.0與3.0在目錄結構方面,有明顯的不同 vue cli3.0移除了配置檔案目錄,config 和 build 資料夾 同時移除了 static 靜態資料夾,新增了 public 資料夾,開啟層級目錄還會發現,index.html 移動到 public 中 3.0 config檔案已...

樹的遞迴和非遞迴遍歷

利用迴圈和棧實現前序 中序和後序遍歷 利用佇列實現層次遍歷 typedef struct node bitree stacks 前序遍歷 針對乙個根結點,先輸出其根結點值,再push其所有左結點,然後再彈出乙個結點取其右結點作為新的根結點。void preorder bitree t 前序遍歷的非遞...

Vue3 0和Vue2 0的區別

vue2和vue3的區別 一 常用命令 vue v 檢視本地 vue 版本 二 官方文件 3.0 三 建立檔案 3.0 vue create 進入工程資料夾,建立專案。2.0 vue init webpack 四 啟動專案 3.0啟動npm run serve 2.0啟動npm run dev 在根...