清空數組的幾個方式介紹

1. 前言

前兩天在工作當中遇到一個問題,在

vue3

中使用

reactive

生成的響應式數組如何清空,當然我一般清空都是這麼寫:

let array = [1,2,3];
  array = [];
複制代碼
           

不過這麼用在

reactive

代理的方式中還是有點問題，比如這樣:

let array = reactive([1,2,3]);
    watch(()=>[...array],()=>{
      console.log(array);
    },)
    array = reactive([]);
複制代碼
           

很顯然，因為丢失了對原來

響應式

對象的引用，這樣就直接失去了

監聽

。

2. 清空資料的幾種方式

2.1 使用ref()

使用

ref

,這是最簡便的方法:

const array = ref([1,2,3]);

    watch(array,()=>{
      console.log(array.value);
    },)

    array.value = [];
複制代碼
           

2.2 使用slice

slice

顧名思義，就是對數組進行

切片

，然後傳回一個新

數組

,感覺和

go

語言的

切片

有點類似。當然用過

react

的小夥伴應該經常用

slice

，清空一個數組隻需要這樣寫:

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

指派為

：

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;
複制代碼
           

2.4 使用splice

副作用

函數

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

一樣，會觸發多次。

3. 總結

以上是我個人

工作中

的對于

清空數組

的總結，但是可以看到

splice

還是有點特殊的,會觸發多次，不過為什麼會産生這種差異還有待研究。