Vue の基本リスナーの詳細な説明

Vueのリスナーとは何か

開発中、data によって返されるオブジェクトにデータを定義し、このデータを補間構文やその他の方法を通じてテンプレートにバインドできます。
データが変更されると、テンプレートにバインドされたデータが自動的に更新され、最新のデータが表示されます。ただし、この変更はテンプレート内のデータ値によって自動的に監視されます。
場合によっては、コードロジック内の特定のデータの変更を監視したい場合、リスナーウォッチを使用する必要があります。

公式定義: Vue は、watch オプションを通じてデータの変更に応答するためのより一般的な方法を提供します。このアプローチは、データが変更されたときに非同期またはコストのかかる操作を実行する必要がある場合に最も役立ちます。

キーがリッスンするリアクティブプロパティ (データまたは計算されたプロパティのいずれかを含む) であり、値が対応するコールバック関数であるオブジェクト。値はメソッド名、または追加オプションを含むオブジェクトにすることもできます。コンポーネントインスタンスは、インスタンス化されると $watch() を呼び出します。deep、immediate、flush オプションの詳細については、$watch を参照してください。

リスナーの使い方

オプション: watch

タイプ: { [key: string]: string | Function | Object | Array}

ウォッチリスナーの構成オプション:

デフォルトでは、watch はデータ参照の変更のみを監視し、データの内部プロパティの変更には応答しません。

このとき、deep オプションを使用してより深くリッスンすることができます。もう 1 つの特性は、最初にすぐに実行することを望んでいることです。このとき、immediate オプションを使用します。このとき、後でデータが変更されるかどうかに関係なく、リスニング関数は 1 回実行されます。

データの内容:

データ（） {
    戻る {
        情報：
            名前: 'cgj'
        }
    }
}
時計：
    情報：
        ハンドラ(新しい値、古い値) {
            console.log(新しい値、古い値)    
        }
        深い：本当、
        即時: true、
    }
}

Vue3 のドキュメントには記載されていないが、Vue2 のドキュメントには記載されているもう 1 つのことは、リスニングオブジェクトのプロパティです。

'info.name': 関数(新しい値、古い値) {
    console.log(新しい値、古い値)
}

別の方法は、$watch API を使用することです。

$watch の詳細については、公式 API (あまり使用されていない) を参照してください: サンプルメソッド | Vue.js

const app = createApp({
  データ（） {
    戻る {
      a: 1、
      b: 2,
      c: {
        d: 4
      },
      e: 5,
      女性: 6
    }
  },
  時計：
    // トップレベルのプロパティをリッスンする
    a(val, 古いVal) {
      console.log(`新しい: ${val}、古い: ${oldVal}`)
    },
    // 文字列メソッド名 b: 'someMethod',
    // このコールバックは、監視対象オブジェクトのプロパティが変更されたときに呼び出されます。ネストがどれだけ深くてもかまいません。c: {
      ハンドラ(val, oldVal) {
        console.log('c が変更されました')
      },
      深い: 本当
    },
    // ネストされた単一のプロパティをリッスンする
    'c.d': 関数 (val, oldVal) {
      // 何かをする
    },
    // このコールバックはリスニング開始直後に呼び出されます e: {
      ハンドラ(val, oldVal) {
        console.log('変更されました')
      },
      即時: 真
    },
    // コールバックの配列を渡すと、1つずつ呼び出されます f: [
      'ハンドル1',
      関数handle2(val, oldVal) {
        console.log('handle2がトリガーされました')
      },
      {
        ハンドラ: 関数 handle3(val, oldVal) {
          console.log('handle3がトリガーされました')
        }
        /* ... */
      }
    ]
  },
  メソッド: {
    いくつかのメソッド() {
      console.log('bが変更されました')
    },
    ハンドル1() {
      console.log('ハンドル1がトリガーされました')
    }
  }
})
定数 vm = app.mount('#app')
vm.a = 3 // => 新: 3、旧: 1

vue リスナーウォッチ

目標: データ/計算されたプロパティ値の変更を監視できる

文法：

時計：
    「監視されているプロパティの名前」（newVal、oldVal）{
    }
}

コード例:

<テンプレート>
  <div>
    <input type="text" v-model="名前">
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ（）{
    戻る {
      名前： ""
    }
  },
  // 目標: 名前の値の変更をリッスンする/*
  文法：
    時計：
      変数名(newVal, oldVal){
        // ここで値に対応する変数名が自動的に変更されます}
    }
  */
  時計：
    // newVal: 現在の値 // oldVal: 以前の値 name(newVal, oldVal){
      コンソールにログ出力します。
    }
  }
}
</スクリプト>
<スタイル>
</スタイル>

要約: プロパティの変更を監視するには、watchメソッドを使用します

Vue リスナー - ディープリスニングと即時実行

目標: データ/計算されたプロパティ値の変更を監視できる

文法：

時計：
    「監視されているプロパティの名前」（newVal、oldVal）{
    }
}

コード例:

<テンプレート>
  <div>
    <input type="text" v-model="ユーザー名">
    <input type="text" v-model="ユーザー年齢">
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ（）{
    戻る {
      ユーザー: {
        名前： ""、
        年齢: 0
      }
    }
  },
  // ターゲット: リスニングオブジェクト/*
  文法：
    時計：
      変数名(newVal, oldVal){
        // ここで値に対応する変数名が自動的に変更されます},
      変数名: {
        ハンドラ(newVal, oldVal){
        },
        deep: true, // ディープリスニング（オブジェクトの内部レイヤーで値が変化します）
        immediate: true // すぐにリッスンします (Web ページが開かれたときにハンドラが 1 回実行されます)
      }
    }
  */
  時計：
    ユーザー: {
      ハンドラ(newVal, oldVal){
        //userconsole.log 内のオブジェクト(newVal, oldVal);
      },
      深い：本当、
      即時: 真
    }
  }
}
</スクリプト>
<スタイル>
</スタイル>

要約: 即時リスニング、ディープリスニング、ハンドラー固定メソッドのトリガー