vue3.0 のウォッチ リスナーの例の詳細な説明

<テンプレート>
  <h1>リスナーページを見る</h1>
  <p>通常のリスニングデータ: {{ num }}</p>
  <button @click="butFn">クリック</button>
</テンプレート>

'vue' から { ref, watch } をインポートします
// 必要な Vue3 の新機能をインポートし、必要に応じて setup() を呼び出すことを忘れないでください {
 
    定数 num = ref(0)
    // watch (監視するデータ、コールバック関数)
    ウォッチ(num, (v1, v2) => {
      // v1 は変更後の新しい値です // v2 は変更前の値です console.log(v1, v2)
      // 要点: 通常の関数をリスニングすると、変更前と変更後の値を取得でき、リスニング対象のデータは応答性がある必要があります})
    
    // 単一マシンイベント const butFn = () => {
      数値++
    }
    
     戻り値: { butFn, num }
}

    定数 num = ref(0)
    定数num2 = ref(20)
    
    ウォッチ([num, num2], (v1, v2) => {
      // 保存された結果は配列であり、返される結果も配列形式の結果です // v1 は最新の結果の配列です // v2 は古いデータの配列です console.log('v1', v1, 'v2', v2)
    // 要約: 更新前後の値を取得でき、リスニング結果も配列データの順序と一致します})

	定数obj = リアクティブ({
      メッセージ: 「奇妙でかわいい」
    })
    
   ウォッチ(obj, () => {
      // 最新の値のみ取得できます console.log(obj.msg)
    })

	定数obj = リアクティブ({
      メッセージ: 「奇妙でかわいい」
    })
    
	ウォッチ(() => obj.msg,(v1, v2) => {
        // v1 は監視データの最新値です // v2 は監視データの元の値です console.log(v1, v2)
        // 要約: オブジェクトのプロパティを監視する場合は、矢印関数を使用する必要があります // 監視するデータが少ないほど、パフォーマンスが向上します}
    ）

   定数obj = リアクティブ({
      メッセージ: {
        情報: 'ooo'
      }
    })
   ウォッチ(() => obj.msg,(v1, v2) => {
        コンソールログ(v1、v2)
      },
      {
        // コンポーネントの最初のレンダリングはimmediate: trueをトリガーします。
        // ディープモニタリングをオンにすると、オブジェクト内のデータが変更された場合も監視されます // 監視対象のデータが比較的長い式の場合は、関数を使用する必要があります // ただし、関数形式で記述した後は、内部のデータを変更できないため、ディープオプション deep: true を追加する必要があります
      }
    ）