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 つの興味深い方法

推薦する

Mysql と Oracle でよく使用される複数テーブルの変更ステートメントの概要

今日、SQLトレーニングの質問バンクでこの質問を見ました。これは、非常に代表的なマルチテーブル変更の...

opensslを使用して無料の証明書を生成する方法

1: openssl とは何ですか? その機能は何ですか?適用シナリオは何ですか? Baidu 百科...

複数の値を返す MySQL ストアド プロシージャ メソッドの例

この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...

ホワイトボードを踏まないようにするゲームを実装するための HTML+CSS+JS

目次背景1. 思考分析2. ページ構成2.1 HTML レイヤー2.2 CSS レイヤー2.3 JS...

MySQLはカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。

序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...

HTML タグの表示モード (ブロックレベル タグ、インライン タグ、インライン ブロック タグ) に関する簡単な説明

今日の講義では、HTML におけるタグの表示モードについてお話ししましたが、これはブロックレベルタグ...

Ubuntu 18.04にmysql5.7をインストールする

Ubuntu 18.04では参考までにmysql 5.7をインストールします。具体的な内容は以下のと...

nginx設定ファイルの場所を見つける方法の詳細な説明

よく知らないサーバーの場合や、かなり前にインストールした場所を忘れてしまった場合、構成ファイルの場所...

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...

ウェブページでコンテンツを引用するためによく使われるHTMLタグをマスターする

長い引用には blockquote を、短い引用には q を、参考文献には cite を使用します。...

MySQLが正常にインストールされたかどうかを確認する方法

MySQL をインストールした後、DOS ウィンドウまたは MySQL 5.7 コマンドライン クラ...

React プロジェクトにおける axios カプセル化と API インターフェース管理の詳細な説明

目次序文インストール導入環境の切り替え傍受を要求するレスポンスインターセプションAPIの統合管理要約...

ElementUI のネストされたテーブルに基づいて複数選択を実装するためのサンプル コード

序文:私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...

JavaScript関数の詳細な説明これを指す問題

目次1.関数内のこの方向1. 通常の機能2. コンストラクター3. オブジェクトメソッド4. イベン...

Ubuntu 19.10 で ssh サービスを有効にする (詳細なプロセス)

Ubuntuでsshを開くのに1時間以上かかりました。主な原因は、最初に読んだチュートリアルの手順...