vue WatchとComputedの使用の概要

vue WatchとComputedの使用の概要

01. リスナーウォッチ

(1)機能

  • ウォッチ: データ内のデータ変更を監視するために使用され、監視対象の属性値が変更された場合にのみ実行されます。
エクスポートデフォルト{
    データ() {
        戻る {
            番号: 1
        }
    },
    時計:{
        // 通常の監視方法。ここではデータ内の数値属性を監視することを意味します // 最初のパラメータは変更後の新しい値を示し、2 番目のパラメータは変更前の古い値を示します number(newVal,oldVal){
            コンソールにログ出力します。
            コンソールにログ出力します。
        }
    }
}

(2)特性と方法

  • 即時: コンポーネントの作成後、プロパティが直ちに監視されることを示します。値が最初にバインドされると、次のように設定されます: 即時: true
  • ハンドラ: オブジェクトを監視するときに使用します。変更が発生すると、ハンドラ内のメソッドが実行されます。
  • deep: オブジェクトと配列内のプロパティの変更を詳細に監視することを示します。設定: deep: true
エクスポートデフォルト{
    データ(){
        戻る {
            番号: 1
        }
    },
    時計:
        // 数値属性をリッスンする number: {
			ハンドラ(newVal, oldVal){
                
            },
            即時: true, // すぐに聞く}
    }
}

(3)監視対象

  • オブジェクトの直接割り当て操作を監視できます
    • ただし、オブジェクト プロパティの追加、変更、または削除を監視することはできません。
エクスポートデフォルト{
    データ() {
        戻る {
            オブジェクト: {
                1: 1
            }
        }
    },
    時計:
        オブジェクト: {
            ハンドラ(newVal){
                console.log('聞いている', newVal)
            },
            即時: 真
        }
    },
    作成された(){
        // 属性の変更操作であるため監視できません // 一度印刷すると、印刷結果は変更された値になります。
        この.obj.a = 2 

        // オブジェクトへの直接割り当て操作なので監視できます // 2 回印刷します (即時監視は 1 回印刷され、変更は 1 回印刷されます)
        this.obj = {a: 2} 
    }
}

Vueはインスタンスを初期化するときにプロパティのゲッター/セッター変換処理を実行するため

したがって、Vueがそれを変換してレスポンシブにするには、データオブジェクトにプロパティが存在する必要があります。

したがって、Vue はオブジェクト プロパティの追加、削除、変更などの操作を検出できません。

デフォルトでは、ハンドラーはオブジェクトの内部プロパティへの参照の変更のみを監視します。

したがって、割り当て操作を実行するときにのみリッスンします。

  • オブジェクトのプロパティ値を直接監視できます
    • このプロパティが基本型の値である場合は、通常どおり監視できます。
エクスポートデフォルト{
    時計:
        'obj.a': {
            ハンドラ(newVal){
                コンソールログ(新しい値)
            }
        }
    },
    作成された(){
        // 次の両方とも監視して 2 回印刷できます this.obj.a = 2
        this.obj = {a:2}
    }
}
  • deepプロパティを使用すると、詳細な監視が可能です。
    • 既存のプロパティの変更のみを監視でき、新しいプロパティは監視できません。
    • Vueはthis.$setを監視して元の属性の変更を変更することはできません

これは、this.$set() がデータの初期値を変更することと同等であるためです。

監視をトリガーすることはできますが、変更は反映されません。つまり、newVal === oldValです。

エクスポートデフォルト{
    時計:
        オブジェクト: {
            ハンドラ(newVal){
            	コンソールログ(新しい値)
            },
            深い:本当、
            即時: 真
        }
    },
    作成された(){
        // 詳細な監視の後、属性の変更も直接監視できます // 2 回印刷します (即時のため)
        この.obj.a = 2
        
        // オブジェクト プロパティの追加を監視できません // 一度印刷すると、印刷結果は新しく追加されたプロパティを持つオブジェクトになります // つまり、即時であるため 1 回だけ実行され、{a:1,b:2} が印刷されます
        この.obj.b = 2
        
        // 監視はトリガーできますが、変更は監視できません // 2 回印刷され、両方の値は {a:2} であり、変更を反映できません this.$set(this.obj, 'a', 2)
    }
}

(4)リスニングアレイ

  • 監視可能
    • 配列の直接割り当て
    • 配列メソッドによる追加、変更、削除操作
    • this.$set() メソッドによる配列操作

pop()、push() などの配列メソッド、および this.$set(arr, index, newVal) メソッド

監視をトリガーすることはできますが、変更を反映することはできません。つまり、newVal === oldVal です。

  • 監視できません
    • 配列の非配列メソッドの追加、削除、変更操作を監視できません
    • インデックス値を通じて配列の変更を直接監視することはできません。
    • 配列の長さの変化を監視できません
エクスポートデフォルト{
    データ() {
        戻る {
            編曲: [1]
        }
    },
    時計:
        編曲: {
            ハンドラ(newVal, oldVal) {
                console.log('新規:', newVal)
                console.log('古い:', 古い値)
            },
            即時: 真
        }
    },
    作成された() {
        // 監視可能 --- 配列全体を直接割り当てる this.arr = [2]
        
        // 監視できません --- インデックスの割り当て、長さの変更 this.arr[1] = 2
        this.arr[0] = 2
        この.arr.長さ = 2
        
        // 監視をトリガーできますが、変更を監視することはできません => 新しい値と古い値は同じです this.arr.push(2)
        this.$set(this.arr, 0, 2)
    }
}

02. 計算プロパティ

(1)属性計算のための設定法

  • 計算プロパティは、関数ではなくオブジェクトとして記述できます。ただし、関数形式では、デフォルトで get メソッドを使用します。オブジェクトとして記述する場合は、set メソッドも使用できます。
計算: {
  フルネーム:
    得る () {
      `${this.firstName} ${this.lastName}` を返します。
    },
    設定(値) {
      const names = val.split(' ');
      this.firstName = 名前[0];
      this.lastName = names[names.length - 1];
    }
  }
}

this.fullName = 'Aresn Liang' を実行すると、計算されたセットが呼び出され、firstName と lastName が Aresn と Liang に割り当てられます。

計算結果は、他の計算結果や他のコンポーネントのデータに依存する場合があります。

(2)違い

  • 計算プロパティとリスナー
    • 計算プロパティとは、従属値の変化を監視することです。
      • 依存関係の値が変更されない限り、キャッシュは再利用のために直接読み取られます。
      • 計算プロパティは非同期操作でのデータ変更に対応できない
      • 手動で呼び出す必要がある
    • リスナーウォッチは、属性値の変更を監視します。
      • プロパティ値が変更されるたびに、コールバック関数がトリガーされます
      • リスナーは非同期操作中にデータの変更に応答できます
      • 自動トリガー
  • 計算プロパティとメソッド
    • メソッドはメソッドなので、パラメータを受け入れることができますが、計算はできません。
    • 計算結果はキャッシュ可能だが、メソッドはキャッシュできない

(3)利用シナリオ

  • プロパティが複数のプロパティの影響を受ける場合は、computed が必要です。
  • 1つのデータが複数のデータに影響を与える場合は、データを検索するなどウォッチを使用する必要があります。

以上がvue WatchとComputedの使い方の詳しいまとめです。vue WatchとComputedの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • Vue.js の watch メソッドと computed メソッドの違いの詳細な例
  • Vue の computed と watch の違いを理解する方法
  • Vueのcomputedとwatchの違いは何ですか?
  • Vue の watch と computed の詳細な説明
  • Vue における watch と computed の違いと使い方
  • Vue における computed と watch の違い
  • Vue における watch、computed、updated の違いと使い方
  • Vueの計算プロパティとウォッチの違いを簡単に理解する
  • Vue における計算プロパティ、メソッド、監視の違い
  • Vue の computed と watch の類似点と相違点の詳細な説明
  • Vue の computed と watch の違いを分析する

<<:  MySQL 5.7.18 インストーラーのインストール ダウンロード グラフィック チュートリアル

>>:  Dockerでnginxをデプロイし、設定ファイルを変更する方法

推薦する

純粋な CSS で実装された 3 つの通知バーのスクロール効果

序文通知バー コンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのよう...

MySQLトリガーの例の詳細な説明

目次トリガーとは何かトリガーを作成する複数の実行ステートメントを持つトリガーの作成制限と考慮事項要約...

MySQL でのログインを取り消す

コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...

MySQL のタイムスタンプと日付時刻のタイムゾーンの問題によって生じる DTS の落とし穴の詳細な説明

目次MySQL で現在の時刻を表現するにはどうすればよいでしょうか?結論は確認するピットMySQL ...

Docker を使用した ELK7.3.0 ログ収集サービスの導入に関するベスト プラクティス

最初に書くこの記事では、ELK 7.3.0 の展開についてのみ説明します。展開環境:システムセントO...

エンタープライズプロダクション MySQL 最適化入門

Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...

Brotli圧縮アルゴリズムを有効にするNginxの実装プロセスの詳細な説明

序文Web アプリケーションでは、トラフィックを節約し、転送データのサイズを縮小し、転送効率を向上さ...

Linux で binlog ファイルの作成時間を表示するコマンド

目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...

Videojs+swiper が Taobao の商品詳細カルーセルを実現

この記事では、Taobao商品詳細のカルーセルを実現するためのvideojs+swiperの具体的な...

アイデアを通じてプロジェクトをDockerにパッケージ化する方法

多くの友人が、Docker でプロジェクトを実行する方法をずっと知りたがっていました。今日は、自分の...

Vue でコンポーネントを一括インポート、登録、使用する方法

序文コンポーネントは、非常に頻繁に使用されるものです。多くの人は、コンポーネントを 1 つのファイル...

Linuxでmore、less、catコマンドを使用してファイルの内容を表示します

Linux では、cat、more、less の各コマンドを使用してファイルの内容を表示できます。c...

Vue のデータ応答性に関する詳細な理解

目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...

MySQL FAQ シリーズ: 一時テーブルを使用する場合

一時テーブルの概要一時テーブルとは: MySQL は中間結果セットを保存するために使用されます。一時...

Linux の vsftpd サービス構成の簡単な分析 (匿名、ユーザー、仮想ユーザー)

vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...