【Vue.js】監視プロパティ（ウォッチャ）の基本

はじめに

こんにちは！
今回は【Vue.js】監視プロパティ（ウォッチャ）の基本についてアウトプットしていきます！

監視プロパティとは

監視プロパティとは、特定のデータまたは、算出プロパティの状態を監視して変化があったときに登録した処理を自動的に実行できるものです。

書き方・解説

HTML

<div id="app">
  <p>
    {{ message }}
  </p>
  <p>
    <input type="text" v-model:value="message">
  </p>
  <pre>{{ $data }}</pre>
<!-- ⏫変更された内容がわかるように記述しておきます。 -->
</div>

Vue.js

var app = new Vue({
  el: "#app",
  data: {
    message: 'Hello Vue.js!'
  },
  watch: {
  //⏫監視プロパティ（ウォッチャ）
    message: function(newValue, oldValue){
                     //⏫新しい値　　　　　⏫変更前の値
      console.log('new: %s , old: %s' , newValue,oldValue)
      　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//⏫newValue,⏫oldValueがコンソールされる。
    }
  }
})

監視プロパティ（ウォッチャ）watchを定義し、``dataのmessageの値に変更があったらconsoleにlogに新しい値と変更前の値を表示するプログラムを記述しました。

上記のようにテキストに「abc」と続けて値を変更していくと、以下のように新しく入力した値と入力する前の値がconsoleに出力されました。

まとめ

・監視プロパティ（ウォッチャ）とは、対象の監視物に変化があったとき記述した処理が自動的に実行されるものである。

最後に

今回は監視プロパティ（ウォッチャ）の基本についてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！