91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue如何清空數組

發布時間:2021-12-29 12:37:49 來源:億速云 閱讀:1809 作者:小新 欄目:開發技術

小編給大家分享一下vue如何清空數組,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

    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 = [];

    vue如何清空數組

    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);

    vue如何清空數組

    不過需要注意要使用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;

    而且,這種只會觸發一次,但是需要注意watch要開啟deep:

    vue如何清空數組

    不過,這種方式,使用reactive會更加方便,也不用開啟deep:

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

    vue如何清空數組

    2.4 使用splice

    副作用函數splice也是一種方案,這種情況同時也可以使用reactive:

    const array = reactive([1,2,3]);
    
        watch(()=>[...array],()=>{
          console.log(array);
        },)
    
        array.splice(0,array.length)

    不過要注意,watch會觸發多次:

    vue如何清空數組

    當然也可以使用ref,但是注意這種情況下,需要開啟deep:

    const array = ref([1,2,3]);
    
        watch(array,()=>{
          console.log(array.value);
        },{
          deep:true
        })
    
        array.value.splice(0,array.value.length)

    vue如何清空數組

    但是可以看到ref也和reactive一樣,會觸發多次。

    以上是“vue如何清空數組”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

    向AI問一下細節

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    vue
    AI

    贺兰县| 温泉县| 通榆县| 灵山县| 西盟| 马边| 甘洛县| 永康市| 桃园市| 汝阳县| 周至县| 宁晋县| 宁国市| 礼泉县| 达孜县| 荃湾区| 华阴市| 阿克陶县| 新乐市| 光山县| 沾益县| 喀什市| 屯门区| 平乡县| 台南县| 石屏县| 永新县| 宁远县| 都昌县| 北安市| 星子县| 集贤县| 根河市| 长春市| 大荔县| 延边| 南岸区| 阿坝| 安化县| 铁岭县| 宁远县|