腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

vue清空數(shù)組的幾個(gè)方式(小結(jié))

更新時(shí)間：2021年12月29日 11:03:21 作者：RadiumAg

本文主要介紹了vue清空數(shù)組的幾個(gè)方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

1. 前言

前兩天在工作當(dāng)中遇到一個(gè)問題,在vue3中使用reactive生成的響應(yīng)式數(shù)組如何清空,當(dāng)然我一般清空都是這么寫:

  let array = [1,2,3];
  array = [];

不過這么用在reactive代理的方式中還是有點(diǎn)問題，比如這樣:

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

很顯然，因?yàn)閬G失了對(duì)原來響應(yīng)式對(duì)象的引用，這樣就直接失去了監(jiān)聽。

2. 清空數(shù)據(jù)的幾種方式

當(dāng)然，作為一名十年代碼經(jīng)驗(yàn)常年摸魚的我，立馬就給出了幾個(gè)解決方案。

2.1 使用ref()

使用ref,這是最簡便的方法:

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

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

    array.value = [];

2.2 使用slice

slice顧名思義，就是對(duì)數(shù)組進(jìn)行切片，然后返回一個(gè)新數(shù)組,感覺和go語言的切片有點(diǎn)類似。當(dāng)然用過react的小伙伴應(yīng)該經(jīng)常用slice，清空一個(gè)數(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

個(gè)人比較喜歡這種,直接將length賦值為0：

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

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

   array.value.length = 0;

而且，這種只會(huì)觸發(fā)一次，但是需要注意watch要開啟deep:

不過，這種方式，使用reactive會(huì)更加方便，也不用開啟deep:

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

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

    array.length = 0;

2.4 使用splice

副作用函數(shù)splice也是一種方案，這種情況同時(shí)也可以使用reactive:

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

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

    array.splice(0,array.length)

不過要注意，watch會(huì)觸發(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一樣，會(huì)觸發(fā)多次。

3. 總結(jié)

到此這篇關(guān)于vue清空數(shù)組的幾個(gè)方式(小結(jié))的文章就介紹到這了,更多相關(guān)vue清空數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片