【Vue.js 2.9】はじめてのVue.js 監視プロパティ（ウォッチャ）の使い方

・監視プロパティ（ウォッチャ）の書き方
・算出プロパティとの違いを紹介

はじめに

今回は監視プロパティ（ウォッチ）の書き方についてです。
監視プロパティは特定のデータに変更が発生した場合に動作します。
新しい値、古い値を所持すること出来て処理の中で使うことが出来ます。

【Vue.js 2.9】はじめてのVue.js プロジェクト作成からWelcomeページの表示・はじめてVue.jsを使う場合のやり方・Welcomeページを表示するまで紹介はじめに Vue.jsの学習がここから始...

環境情報

名前	詳細
Vue.js	開発バージョン（https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js）
エディタ	JSFiddle（https://jsfiddle.net/）

監視（ウォッチ）の書き方

テキストボックスを1つ用意して、その値を表示するPタグとテキストボックスの値が変更されると変更前の値を表示するPタグを用意します。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
  <input type='text' v-model='message' />
  <p>
    現在値：{{ message }}
  </p>
  <p>
    変更前：{{ oldMsg }}
  </p>
</div>

new Vue({
	el: '#app',
	data:{
		message: '123456',
 		oldMsg: ''
	},
	watch:{
		message: function(newValue, oldValue){
			this.oldMsg = oldValue
		}
	}
})