Vue2 と Vue3 でウォッチ リスナーを使用する方法

Vue2 と Vue3 でウォッチ リスナーを使用する方法

watch : データの変更を監視する(特定の値の変更イベント)

vue2.x

 データ(){
     戻る {
         番号:10
     }
 },
 時計:{
      番号:{
	      /*
	       * newValue: 現在の値 * oldValue: 最後の瞬間の値を変更する */
          ハンドラー(新しい値、古い値){
          	// 何かを行う
          },
          /*
           * deep: ブール値: 詳細な監視 * true: ヒープの変更を監視 * false: スタックの変更のみを監視 (デフォルト)
           */
          深い:真/偽、
          /*
           * 即時:ブール値: ハンドラー関数が最初に定義されたときに実行するかどうか* true: ハンドラー関数が最初に定義されたときに実行する* false: 変更後にハンドラー関数を実行する*/          
          即時:true/false
      }      
  }

vue3.x

ウォッチは応答データを監視するために使用されます

基本的な使い方

定数 num = ref(0)
1. 'vue' から import {watch} をインポートします。
2. `const return value = watch(監視する値、(newVal、oldVal)=>{ }、{deep、immediate、flush})` を使用します。
	 
	 戻り値: 監視をオフにすることができます: 戻り値()
	 パラメータ1: 監視する値 基本データ型 (数値、文字列、ブール値、null、未定義): () => 基本データ型の値 複合データ型 (配列、オブジェクト、関数): 直接書き込み / () => 基本データ型の値 パラメータ2: Vue2 のハンドラー関数に類似 パラメータ3: {} オブジェクト、オブジェクトには構成項目 (deep、immediate、flush、
	 		deepとimmediateの意味は上で説明しました。ここでは主にflushの値について説明します。
	 			 `フラッシュ:post/sync/pre
      				   pre (デフォルト値): レンダリング前に値が変更され、DOMにレンダリングされません。
      				   post: レンダリング後、値が変更され、DOMにもレンダリングされます
    				   同期: 変更ごとにレンダリング前に 1 回レンダリングします。
	 		

注記:
実際の開発では変更は検出されず、統一された使用が使用される

watch(()=>応答データ、()=>{}、{deep:true})

以上が、Vue2とVue3でのウォッチリスナーの使い方の詳しい内容です。ウォッチリスナーの使い方についての詳細は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください!

以下もご興味があるかもしれません:
  • vue3.0 のウォッチ リスナーの例の詳細な説明
  • vueリスナーウォッチでこれを呼び出すときに未定義の問題を解決する
  • Vue 2.0 リスナーウォッチ属性コードの詳細な説明
  • Vue.js でのウォッチの使用例
  • Vueのウォッチリスナーの使い方を説明する記事

<<:  MySql インデックスはクエリ速度を向上させる一般的な方法のコード例

>>:  Tomcat CentOS インストールプロセス図

推薦する

Podmanはコンテナを自動的に起動し、Dockerと比較します

目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...

ネイティブ JavaScript でシンプルな Gobang ゲームを実装する

この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...

Linux スケジュールタスクの関連操作の概要

皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...

Javascriptの基礎を学ぶための10の重要な質問

目次1. Javascript とは何ですか? 2. DOMとは何か3. JSコードの実行方法4. ...

Mysql WorkBench のインストールと設定のグラフィックチュートリアル

この記事では、Mysql WorkBenchのインストールと設定のグラフィックチュートリアルを参考ま...

mysql5.7.14 解凍版インストールと設定方法 グラフィックチュートリアル (win10)

Win10はmysql5.7の解凍版をインストールします。参考までに、具体的な内容は次のとおりです...

MySQL はリレーショナルデータベースですか?

MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...

MySQLの自動増分主キーIDはこのように処理されません

MySQLの自動増分主キーIDは段階的に増加しません1. はじめにMySQL データベースにデータを...

Dockerコンテナを作成、起動、停止する方法

1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...

MySQL で削除されたレコードが有効にならない理由のトラブルシューティング

オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...

docker-maven-pluginを使用してデプロイメントを自動化する方法を説明します

1. docker-maven-pluginの紹介私たちの継続的インテグレーションプロセスでは、プロ...

MySQL パフォーマンス最適化のための魔法のツール、Explain の基本的な使用分析

導入MySQL には、SELECT ステートメントを分析し、開発者が最適化できるように SELECT...

Vueはシンプルなデータ双方向バインディングを実装します

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。初心者...

HTML テーブルタグチュートリアル (25): 垂直配置属性 VALIGN

垂直方向では、行の配置を上、中央、下に設定できます。基本的な構文<TR VALIGN=&quo...

MySQL マルチバージョン同時実行制御メカニズム (MVCC) ソースコードの詳細な説明

目次1. はじめに2. MVCC (マルチバージョン同時実行制御メカニズム) 2.1 繰り返し読み取...