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ù)組進(jìn)行切片，然后返回一個新數(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-cli構(gòu)建項目下使用微信分享功能,本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要介紹了vue實現(xiàn)一個懶加載的樹狀表格實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vux是Vue.js的一個ui庫，官網(wǎng)在這里，官方文檔的配置指南側(cè)重于技術(shù)的羅列，我這里簡化一下Vux的配置流程。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2017-12-12
關(guān)于Element上傳組件beforeUpload上傳前限制失效問題
這篇文章主要介紹了Element上傳組件beforeUpload上傳前限制失效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
最近項目要用到百度地圖api,好久沒用到地圖,就百度了一番,下面這篇文章主要給大家介紹了關(guān)于vue3中使用百度地圖的簡單步驟,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Object.assign觸發(fā)watch原理示例解析
這篇文章主要為大家介紹了Object.assign觸發(fā)watch原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
ESLint是一個代碼檢查工具,用來檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關(guān)于Vue項目中ESLint配置(VScode)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
本文主要介紹了el-tree文字顯示不全的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vscode中的vue項目報錯Property ‘xxx‘ does not exist on type ‘Combin
這篇文章主要介紹了vscode中的vue項目報錯Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
前端架構(gòu)vue動態(tài)組件使用基礎(chǔ)教程
這篇文章主要為大家介紹了前端架構(gòu)vue動態(tài)組件使用的基礎(chǔ)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-02-02