您好,登錄后才能下訂單哦!
小編給大家分享一下vue如何清空數組,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
前兩天在工作當中遇到一個問題,在vue3中使用reactive生成的響應式數組如何清空,當然我一般清空都是這么寫:
let array = [1,2,3]; array = [];
不過這么用在reactive代理的方式中還是有點問題,比如這樣:
let array = reactive([1,2,3]); watch(()=>[...array],()=>{ console.log(array); },) array = reactive([]);
很顯然,因為丟失了對原來響應式對象的引用,這樣就直接失去了監聽。
當然,作為一名十年代碼經驗常年摸魚的我,立馬就給出了幾個解決方案。
使用ref,這是最簡便的方法:
const array = ref([1,2,3]); watch(array,()=>{ console.log(array.value); },) array.value = [];
slice顧名思義,就是對數組進行切片,然后返回一個新數組,感覺和go語言的切片有點類似。當然用過react的小伙伴應該經常用slice,清空一個數組只需要這樣寫:
const array = ref([1,2,3]); watch(array,()=>{ console.log(array.value); },) array.value = array.value.slice(0,0);
不過需要注意要使用ref。
個人比較喜歡這種,直接將length賦值為0:
const array = ref([1,2,3]); watch(array,()=>{ console.log(array.value); },{ deep:true }) array.value.length = 0;
而且,這種只會觸發一次,但是需要注意watch要開啟deep:
不過,這種方式,使用reactive會更加方便,也不用開啟deep:
const array = reactive([1,2,3]); watch(()=>[...array],()=>{ console.log(array); }) array.length = 0;
副作用函數splice也是一種方案,這種情況同時也可以使用reactive:
const array = reactive([1,2,3]); watch(()=>[...array],()=>{ console.log(array); },) array.splice(0,array.length)
不過要注意,watch會觸發多次:
當然也可以使用ref,但是注意這種情況下,需要開啟deep:
const array = ref([1,2,3]); watch(array,()=>{ console.log(array.value); },{ deep:true }) array.value.splice(0,array.value.length)
但是可以看到ref也和reactive一樣,會觸發多次。
以上是“vue如何清空數組”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。