VUEウォッチリスナーの基本的な使い方の詳しい説明

VUEウォッチリスナーの基本的な使い方の詳しい説明

リスナーは通常、データの変更を監視するために使用され、デフォルトではデータが変更されたときに実行されます。

監視対象データの名前が関数名としてここに入力されます。この関数には 2 つのパラメータがあり、1 つは新しい値で、もう 1 つは古い値です。

Vue では、データの変更に応答するために watch が使用されます。watch の使用方法は大きく分けて 3 つあります。

1. 次のコードはwatchの簡単な使用法です

<div id="アプリ">
    <input type="text" v-model="firstName" />
</div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <スクリプト>
var vm = 新しい Vue({
    el:"#アプリ",
    データ:{
        firstName:"张"
    },
    時計:{         
        firstName:(新しい値、古い値){
//firstNameは監視したいデータの名前です。v-modelのfirstNameを監視するなど、監視したい関数名を使用します。                    
//newVal: 変更後の値、つまり最初のパラメータを示します。位置を入れ替えないでください。//oldVal: 変更前の値を示します。
            console.log({newVal,oldVal}); // {newVal: "陈", oldVal: "张"}
        }
        // 監視関数を直接記述し、cityName 値が変更されるたびに関数を実行します。
        // 監視データの直後に文字列形式でメソッド名を追加することもできます: firstName: 'nameChange'
    },
    方法:{
        名前変更(){
         }
    }
})
 vm.firstName = "陈"; // 監視対象の値を変更する</script>

2. 即時監視

watch の基本的な使い方では、値が初めてバインドされるときにはリスニング関数は実行されず、値が変更されたときにのみ実行されるという特徴があります。値が最初にバインドされたときに関数を実行する必要がある場合は、immediate 属性を使用する必要があります。

時計:
  ファーストネーム: {
    ハンドラ(新しい名前、古い名前) {
      this.fullName = newName + ' ' + this.lastName;
    },
    { 即時: true }
  }
}

監視対象データは、ハンドラメソッドと即時処理を含めてオブジェクト形式で記述されます。上記の簡単な記述で記述した関数は、実際にはこのハンドラメソッドを記述しており、デフォルトでは省略されています。

3. ハンドラメソッド

<div id="アプリ">
    <div>
        <p>番号: {{ myNumber }}</p>
        <p>数値: <input type="text" v-model.number="myNumber"></p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
新しいVue({
    el: '#app',
    データ: {
        myNumber: 'Dawei'
    },
    時計:
        私の番号: {
            ハンドラ(newVal, oldVal) {
                コンソールにログ出力します。
                コンソールにログ出力します。
            },
            //immediate が true の場合、コールバック関数はすぐにトリガーされます。false の場合、上記の例と同様に、コールバックはすぐには実行されません。
            即時: 真
          }
      }
 })
</スクリプト>
//ハンドラメソッドはウォッチで実行する必要がある特定のメソッドです

4. 深い属性

オブジェクトやプロパティをどのように監視するのでしょうか?それではdeep属性を紹介しましょう。その役割がこの問題を解決する鍵となります。

 <div id="ルート">
    <p>obj.a: {{obj.a}}</p>
    <p>obj.a: <input type="text" v-model="obj.a"></p>
</div> 
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <スクリプト>
    新しいVue({
        el: '#root',
        データ: {
            オブジェクト: {
                 123 です
            }
        },
        時計:
            オブジェクト: {
            ハンドラ(新しい名前、古い名前) {
                console.log(新しい名前、古い名前);
            },
            即時: true、
            深い:本当
            }
        } 
})
</スクリプト>

上記のコードは deep:true を付けて追加しないとコンソールでは実行されません。初回のみ実行され、出力結果は未定義になります。

デフォルトでは、ハンドラーは obj プロパティの参照の変更のみを監視します。obj に値を割り当てたときのみ監視します。

このとき、ディープ オブザベーションを使用できます。リスナーはレイヤーごとに下に移動し、このリスナーをオブジェクトのすべてのプロパティに追加しますが、これには時間がかかりすぎます。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueウォッチでメソッドを呼び出す際の落とし穴を解決する
  • Vueウォッチの監視方法の概要
  • vue での監視データの変更と監視の各属性の詳細な説明
  • Vue でのウォッチ リスナーのタイミングのトリガー (ウォッチの落とし穴と解決策)

<<:  CSS3はトランジション効果を実現するためにtransitionプロパティを使用する。

>>:  docker で PostgreSQL データベースをインストールして永続化する方法

推薦する

Tomcat メモリ オーバーフロー問題の解決経験

少し前に、製品バージョンをテスト用にテスターに​​提出したのですが、テスト結果はまったく予想外のもの...

nginx ロードバランシングを介して https にリダイレクトする方法

ウェブ上で証明書とキーをコピーするscp -rp -P52113 /application/ngin...

太陽系の惑星のアニメーション効果を実現するHTML+CSS3コード

太陽系の 8 つの惑星(衛星を除く)のアニメーションを作成します。すべての惑星は太陽の周りを回ってい...

モバイル Web WAP には Bootstrap と jQuery Mobile のどちらを使用すべきか

問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...

インデックススキャンを使用したMySQLソート

目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...

MySQL でのサブクエリの基本的な使用法

目次1. サブクエリの定義2. サブクエリの分類1. スカラーサブクエリ: 2. MySQLサブクエ...

ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション

ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...

Javascript Bootstrapのグリッドシステム、ナビゲーションバー、カルーセルの詳細な説明

目次ブートストラップと関連コンテンツの紹介グリッドシステムネストされた列列オフセット列の並べ替えナビ...

Vue3+Vantコンポーネントを使用してアプリの検索履歴機能を実装する(サンプルコード)

現在、新しいアプリプロジェクトを開発中です。私にとっても初めてのアプリ開発です。チームで調査と検討を...

MySQLデータのセキュリティを確保するための提案

データは企業の中核資産であり、企業にとって最も重要なタスクの 1 つです。注意しないと、データが意図...

画像にマウスを置いたときにズームイン/ズームアウトするには JS を使用します

マウスが画像上にあるときにズームインおよびズームアウトするには、JS を使用します。具体的なコードは...

MySQL データベース内の数十億のデータを素早くクリーンアップする方法

今日、ディスクアラーム例外を受け取りました。50G ディスクが爆発しました。分析と解決のプロセスは次...

jQueryは居住地を選択するためのドロップダウンボックスを実装します

居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...

Dockerコンテナを終了した後も実行を継続する方法

現象:イメージを実行します (例: ubuntu14.04)。 docker run -it --r...

選択にスタイルを追加するための純粋な CSS (スクリプトなし) 実装

通常は ul、li を介して選択のデフォルト スタイルを変更して、実現をシミュレートします。このよう...