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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • メンバーの追加や削除時に Vue オブジェクトをリアルタイムで更新できない問題の解決方法
  • Vue 入力 v-model クリア操作
  • Vueでオブジェクトをクリアする方法

<<:  nginx「504 ゲートウェイタイムアウト」エラーを解決する

>>:  CSS で隠し要素を実現する 7 つの興味深い方法

推薦する

CSS 標準: vertical-align プロパティ

<br />原文: http://www.mikkolee.com/13私は最近、ver...

VSCode の JS フォーマットでセミコロンを自動的に追加または削除する方法について

導入js コード文の末尾にセミコロンを追加しても追加しなくても問題ありません。一般的に、チームで開発...

ReactのuseEffectクロージャの落とし穴についての簡単な説明

問題コードuseEffectによって発生したクロージャの問題コードを見てみましょう 定数 btn =...

スネークゲームを作るための Pygame コード

目次使用されるPygame関数スクリーンの作成ヘビの作成ヘビを動かすゲームオーバーの処理食事を増やす...

MySQL の自動インクリメント主キーが連続していないのはなぜですか?

目次1. はじめに2. 自己増分ストレージの説明3つの自己付加価値修正メカニズム4. 自己評価を修正...

vsftpdで仮想ユーザーログインを設定する方法

yum で vsftpd をインストールします [root@localhost など]# yum -...

LINUX でポートが占有されているかどうかを確認する方法

ポートが占有されているかどうかは、これまで一度もわかりませんでした。多くの人に尋ねて、ようやくわかり...

HTML ウェブページの段落レイアウトと改行

Web ページの外観はレイアウトに大きく左右されます。ページ内に長い段落のテキストがある場合、通常は...

JavaScriptはPromiseを使用して複数の繰り返しリクエストを処理します

1. なぜこの記事を書くのですか?重複リクエストの処理に関する記事をたくさん読んだことがあるでしょう...

MySQLテーブルパーティショニングプログラムを変更する方法

MySQLテーブルパーティショニングプログラムを変更する方法1. サブテーブルの実装の原則は次のとお...

MySQL の完全なデータベース バックアップからデータベースとテーブルを復元する方法

公式の MySQL ダンプ ツールで、特定のデータベースのみを復元するにはどうすればよいですか?完全...

Vue ユニットテストに関する予備調査

目次序文なぜユニットテストを導入するのですか?ユニットテストの概要テスト開発パターン1. テスト駆動...

MySQL における exists、in、any の基本的な使い方

【1】存在するループを使用して外部テーブルを 1 つずつクエリし、各クエリの存在する条件ステートメン...

CSS における px、em、rem、pt の特徴、違い、変換について詳しく説明します。

コンセプト紹介: 1. px (ピクセル):仮想的な長さの単位で、コンピュータ システムのデジタル画...

デザイナーの「職業病」について

デザイナーは世界で最も繊細で感情的な人々だと私はいつも感じています。私がこう言うときに優越感を感じる...