Vue で配列をクリアするいくつかの方法 (要約)

1. はじめに

数日前、仕事中に問題に遭遇しました。vue3 で reactive を使用して生成されたレスポンシブ配列をクリアするにはどうすればよいでしょうか? もちろん、通常は次のようにクリアします。

  配列を[1,2,3]とします。
  配列 = [];

ただし、この方法は、次のようなリアクティブ プロキシで使用する場合、まだ少し問題があります。

    配列をreactive([1,2,3])とします。
    watch(()=>[...配列],()=>{
      console.log(配列);
    },)
    配列 = リアクティブ([]);

明らかに、元の応答オブジェクトへの参照が失われるため、監視は直接失われます。

2. データを消去するいくつかの方法

もちろん、10 年のコーディング経験があり、何年も怠けてきた私としては、すぐにいくつかの解決策を思いつきました。

2.1 ref() の使用

ref を使用するのが最も簡単な方法です。

    定数配列 = ref([1,2,3]);

    ウォッチ(配列,()=>{
      console.log(配列.値);
    },)

    配列の値 = [];

2.2 スライスの使用

名前が示すように、slice は配列をスライスして新しい配列を返します。これは、Go 言語の slice に多少似ています。もちろん、React を使用したことがある友人は、slice をよく使用するはずです。配列をクリアするには、次のように記述するだけです。

    定数配列 = ref([1,2,3]);

    ウォッチ(配列,()=>{
      console.log(配列.値);
    },)

    配列の値 = 配列の値のスライス(0,0);

ただし、ref の使用には注意してください。

2.3 長さは0に割り当てられます

個人的には、長さを 0 に直接割り当てるこの方法を好みます。

    定数配列 = ref([1,2,3]);

    ウォッチ(配列,()=>{
      console.log(配列.値);
    },{
      深い:本当
    })

   配列の値の長さ = 0;

さらに、これは一度だけトリガーされますが、深く開くには時計に注意を払う必要があります。

ただし、この方法では、リアクティブを使用する方が便利であり、deep を有効にする必要はありません。

    定数配列 = リアクティブ([1,2,3]);

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

    配列の長さ = 0;

2.4 スプライスの使用

副作用関数 splice も解決策の 1 つです。この場合、reactive も使用できます。

    定数配列 = リアクティブ([1,2,3]);

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

    配列.splice(0,配列.長さ)

ただし、ウォッチは複数回トリガーされることに注意してください。

もちろん、ref を使用することもできますが、この場合は deep をオンにする必要があることに注意してください。

    定数配列 = ref([1,2,3]);

    ウォッチ(配列,()=>{
      console.log(配列.値);
    },{
      深い:本当
    })

    配列の値の連結(0,配列の値の長さ)

しかし、ref も reactive と同様に複数回トリガーされていることがわかります。

3. 結論

これで、Vue で配列をクリアするいくつかの方法についての記事は終了です (要約)。Vue で配列をクリアする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。