Vueの監視方法のケースの詳細な説明

Vueの監視方法のケースの詳細な説明

Vueでの監視方法

時計

知らせ

名前: 監視する属性に同じ名前を付ける必要があります。

1. 機能

Vueインスタンス内のデータの変更を監視し、いつでも状態の変更を変更するために使用されます。

2. トリガー条件

監視するプロパティが変更されると、対応する監視メソッドが自動的に呼び出されます。

3. 使用シナリオ

非同期処理や比較的コストのかかる操作に使用される

4. 例

	 時計:{
             名前(新しい値、古い値){
                  // 計算プロパティは 2 つのパラメータを受け入れることができます。最初のパラメータは新しいプロパティ値、2 番目のパラメータは古いプロパティ値です // this.age
                    // console.log('name プロパティが変更されました')
                    console.log(新しい値、古い値)
                }

5. オブジェクトを監視する場合

<スクリプト>
エクスポートデフォルト{
    データ() {
        戻る {
            オブジェクト: {
                名前:「張三」
                年齢: 20,
                子供たち: [
                    {
                        名前:「李思」
                        年齢: 27
                    },
                    {
                        名前: 「王武」、
                        年齢: 23
                    }
                ]
            }
        };
    },
    時計:
        オブジェクト: {
            ハンドラ: function(newVal, oldVal) {
                console.log("新しい値:", 新しい値);
                console.log("古い値:", 古い値);
            },
            深い:本当、
            即時: 真
        },
        "obj.name": 関数(newVal, oldVal) {
            
            console.log("newVal obj.name:", newVal);
            console.log("oldVal obj.name:", oldVal);
        }
    },
};
</スクリプト>

オブジェクトを監視する場合、最下層でリアルタイムに監視できるように deep:true を追加する必要があります。追加しないと、オブジェクトは変更を監視できなくなります。

即時属性: ブール値
即時: true: 初回読み込み時にデータの変更を監視する
即時: false: 変更が発生したときのみリッスンする

深い:真;

ディープ リスニングをオンにします。つまり、すべての属性にリスナーが追加され、そのうちの 1 つが変更されるとハンドラー関数が実行されます。

Vue の監視方法の具体的な事例については、これで記事は終了です。Vue の監視方法のより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 での watchEffect の使用に関する簡単な分析
  • Vue3 のウォッチの使用方法とベストプラクティスガイド
  • vue WatchとComputedの使用の概要
  • Vue の computed と watch の違いを理解する方法
  • Vueプロジェクトウォッチで関数が繰り返しトリガーされる問題の解決
  • Vue がルート変更を監視するときに watch メソッドが複数回実行される理由と解決策
  • vue3 watch と watchEffect の使い方と違い
  • vue watch 監視オブジェクトのシンプルなメソッド例

<<:  CentOS7 64 ビットでの MySQL 5.7 のインストールと設定のチュートリアル

>>:  CentOS 6 は Docker を使用して Redis マスター スレーブ データベース操作例を展開します

推薦する

Vue.jsはElement-uiを使用してナビゲーションメニューを実装します

この記事では、Element-uiを使用してvue.jsでナビゲーションメニューを実装するための具体...

入力選択スタイルを変更する CSS 疑似クラスのサンプルコード

注: この表はW3Schoolチュートリアルから引用したものです疑似要素の分類と機能: 入力選択スタ...

各グループの最新データを取得するためにMySQLベースのグループを実装する

序文:グループ化関数はグループ内の最初のデータを取得しますが、各グループ内の最新のデータを取得する必...

MLSQLコンパイル時権限制御例の詳細な説明

序文MySQL の権限を簡単に理解すると、MySQL では自分の能力の範囲内で操作が許可され、その限...

Linux でファイルの権限 (所有権) を変更する

Linux と Unix はマルチユーザー オペレーティング システムであるため、ファイルの権限と所...

MySQL データベース設計 3 つのパラダイム例分析

3つのパラダイム1NF: フィールドは分離不可能です。 2NF: 主キーがあり、非主キー フィールド...

mysql 8.0.12 winx64 のダウンロードとインストールのチュートリアル

MySQL 8.0.12のダウンロードとインストールのチュートリアルは参考までに、具体的な内容は次の...

ブルートフォース攻撃を防ぐためのシェルスクリプト設定

シェルスクリプトはアクセス制御を設定し、複数回のログイン失敗後にIPをブロックしてSSHのブルートフ...

ウェブページで Enter キーを押すと自動的にフォームを送信し、他のページにジャンプするソリューション

ウェブページでEnterキーを押すと、フォームは自動的に送信され、他のページに移動します。クエリフォ...

Linuxでディスク使用量を確認する方法

1. dfコマンドを使用してディスク全体の使用量を表示します。 df コマンドは、ハードディスクのマ...

mysqlは時間を自動的に追加し、時間を自動的に追加および更新する操作を実装します

時間フィールドは、データベースの使用時によく使用されます。よく使われるのは作成時間と更新時間です。し...

CSSは高度に適応したフルスクリーンを実現します

独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...

Nginx Httpモジュールシリーズにおけるautoindexモジュールの具体的な使用法

ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...

表 td 画像水平および垂直中央揃えコード

HTMLコード:コードをコピーコードは次のとおりです。 <td align="cen...

VMware14 に CentOS 7 をインストールするグラフィック チュートリアル

CentOS の紹介CentOS は、Red Hat Linux が提供する無料で利用できるソースコ...