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をデプロイし、設定ファイルを変更する方法

推薦する

Saltstack に Zabbix サービスをデプロイする方法を説明します

目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...

サブクエリ最適化における MySQL 選択の実装

以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...

webpackコード断片化の実装

目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...

Linux システム AutoFs 自動マウント サービスのインストールと構成

目次序文1. サービスプログラムをインストールする2. メイン設定ファイルを書く3. サブ構成ファイ...

HTML 編集の基礎 (初心者必読)

DREAMWEAVER を開き、新しい HTML を作成します。 。ボディの特性: bgcolor...

CSS を使用して画像の下の空白を数ピクセル消去する方法の詳細な説明

最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...

iframe なしの div ネスト HTML

最近、宿題をしているときに、iframe を使用せずにページをネストする必要があったため、jquer...

MySQL はパスワード強度の検証をオフにします

パスワード強度検証について: [root@mysql mysql]# mysql -uroot -p...

Vueはボールのスライディングクロス効果を実現します

この記事の例では、ボールのスライドとクロスの効果を実現するためのVueの具体的なコードを共有していま...

CSSでできるならJavaScriptは使わない

序文JavaScript で記述できるアプリケーションは、最終的には JavaScript で記述さ...

MySQL 1130例外、リモートログインできない解決策

目次質問: 1. リモートログイン権限を有効にする: 2. MySQLの権限を更新します。 3. テ...

MySQL 8.0.15 で MGR シングル マスターと複数スレーブを構成する方法

1. はじめにMySQL グループ レプリケーション (略して MGR) は文字通り MySQL グ...

HTML タグのメタ概要、HTML5 のヘッド メタ属性の概要

序文metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うで...

よく使われるJavaScript配列メソッド

目次1. フィルター() 2. 各() 3. いくつか() 4. すべて() 5. 減らす() 6....

HTMLフォームのいくつかの送信方法の概要

最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを...