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

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

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

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

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

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

時計：
    「監視されているプロパティの名前」（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);
      },
      深い：本当、
      即時: 真
    }
  }
}
</スクリプト>
<スタイル>
</スタイル>