vue清空數(shù)組的幾個方式(小結(jié))
1. 前言
前兩天在工作當(dāng)中遇到一個問題,在vue3中使用reactive生成的響應(yīng)式數(shù)組如何清空,當(dāng)然我一般清空都是這么寫:
let array = [1,2,3]; array = [];
不過這么用在reactive代理的方式中還是有點問題，比如這樣:
let array = reactive([1,2,3]);
watch(()=>[...array],()=>{
console.log(array);
},)
array = reactive([]);
很顯然，因為丟失了對原來響應(yīng)式對象的引用，這樣就直接失去了監(jiān)聽。
2. 清空數(shù)據(jù)的幾種方式
當(dāng)然，作為一名十年代碼經(jīng)驗常年摸魚的我，立馬就給出了幾個解決方案。
2.1 使用ref()
使用ref,這是最簡便的方法:
const array = ref([1,2,3]);
watch(array,()=>{
console.log(array.value);
},)
array.value = [];
2.2 使用slice
slice顧名思義，就是對數(shù)組進行切片，然后返回一個新數(shù)組,感覺和go語言的切片有點類似。當(dāng)然用過react的小伙伴應(yīng)該經(jīng)常用slice，清空一個數(shù)組只需要這樣寫:
const array = ref([1,2,3]);
watch(array,()=>{
console.log(array.value);
},)
array.value = array.value.slice(0,0);
不過需要注意要使用ref。
2.3 length賦值為0
個人比較喜歡這種,直接將length賦值為0：
const array = ref([1,2,3]);
watch(array,()=>{
console.log(array.value);
},{
deep:true
})
array.value.length = 0;
而且，這種只會觸發(fā)一次，但是需要注意watch要開啟deep:
不過，這種方式，使用reactive會更加方便，也不用開啟deep:
const array = reactive([1,2,3]);
watch(()=>[...array],()=>{
console.log(array);
})
array.length = 0;
2.4 使用splice
副作用函數(shù)splice也是一種方案，這種情況同時也可以使用reactive:
const array = reactive([1,2,3]);
watch(()=>[...array],()=>{
console.log(array);
},)
array.splice(0,array.length)
不過要注意，watch會觸發(fā)多次:
當(dāng)然也可以使用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一樣，會觸發(fā)多次。
3. 總結(jié)
到此這篇關(guān)于vue清空數(shù)組的幾個方式(小結(jié))的文章就介紹到這了,更多相關(guān)vue清空數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vue服務(wù)端渲染瀏覽器端緩存（keep-alive）
在使用服務(wù)器端渲染時，除了服務(wù)端的接口緩存、頁面緩存、組建緩存等，瀏覽器端也避免不了要使用緩存，減少頁面的重繪。這篇文章主要介紹了詳解vue服務(wù)端渲染瀏覽器端緩存（keep-alive），感興趣的小伙伴們可以參考一下2018-10-10
vue提供了mixins、extends配置項，最近使用中發(fā)現(xiàn)很好用。下面小編通過本文給大家介紹下vue中 mixins和extends的巧妙用法，需要的朋友參考下吧2017-12-12
本文將介紹父組件與子組件之間傳遞數(shù)據(jù)的四種方法,以一個簡單的小demo為例,通過實例全方位解析和代碼演示,便于大家理解,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue router 路由跳轉(zhuǎn)方法概述,使用到Vue的項目，我們最常見使用的就是Vue配套的Vue Router庫，本文結(jié)合示例代碼給大家詳細講解，需要的朋友可以參考下2022-12-12
本文主要介紹了Vue中使用Tailwind CSS的具體方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue項目如何獲取本地文件夾絕對路徑問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼
本文主要介紹了Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了vue使用file-saver本地文件導(dǎo)出,大家需要安裝xlsx和file-saver，然后創(chuàng)建localExports.js文件，具體實現(xiàn)代碼跟隨小編一起看看吧2022-01-01
關(guān)于iview按需引用后使用this.$Modal報錯的解決
這篇文章主要介紹了關(guān)于iview按需引用后使用this.$Modal報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
springboot+vue+對接支付寶接口+二維碼掃描支付功能（沙箱環(huán)境）
這篇文章主要介紹了springboot+vue+對接支付寶接口+二維碼掃描支付（沙箱環(huán)境）,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10