Vue.jsで$watchを使ってオブジェクトの変更を監視！deep watchのやり方も解説！

こちらでは「Vue.js」の「$watch」について紹介します。データの変更を監視するプロパティ、「ウォッチャ」で$watchメソッドが呼び出しを解説します。$watchの基本の使い方も解説します。参考にしてみてください。

「vue.js」のデータの変更を監視するプロパティ「ウォッチャ」とはデータや算術プロパティの状態を監視する事です。変化が生じた時登録された処理を「自動実行」をします。

「Vue.js」の「ウォッチャ」で$watchメソッドが呼び出されます。例えば「Vueインスタンス」の「watch」のオプションに設定しています。

「インスタンス化」にしたときにオブジェクトの各エントリに対して$watchメゾットが呼び出されるようになります。また、オブジェクトデータ「some0bj.a」、「some0bj.b」、「aome0bj.c」に変更するとwatchのオプションでは検出されません。注意してください。

「Vue.js」の$watchの基本の使い方の日本語ドキュメントの引用を下記の引用にて紹介します。参考になります。ぜひ、一度見てみるのもいいです。

「Vue.js」の「ウォッチャ」はオプション設定も可能です。説明します。「deep」とはネストされた「オブジェクト」も監視することができます。

「immediate」は初期の読み込みをする際に呼び出しが出来ます。「ウォッチャ」は「算術プロパティ」ではできなかった更に「カスタム」された「監視」を行う事ができます。また、オブジェクトが複数「プロパティ」を持っている際は「プロパティ」の変化も「監視」が可能です。

「Vue.js」の「監視」の解除方法はこちらになります。var unwatch=vm.$watch('a',cb)//歌詞を解除unwatch()になります。unwatch()を使って「監視」を解除をすることも可能です。一度だけの「監視」が出来ます。

「Vue.js」の実行頻度の制御の方法はsetTimeoutやLodashを使って実行頻度を制御することが出来ます。「非同期」、コストの高い処理を実行したい時が「ウォッチャ」の便利なところです。setTimeoutやLodashを使うとコストが高い処理を実行して「パフォーマンス」が下がるのを制御してくれます。

「Vue.js」の$watchの動作確認方法を紹介します。「vue.js」の「$watch」の動作確認がわからない方はこちらを参考にしてみてください。ページの確認や各ボタンの確認方法を紹介しています。

「Vue.js」のページの確認方法はページの表示の時は「変数」が初期化されます。その為「immediate」を指定されている「CartChangelmmediate」が呼び出しされます。

「Vue.js」の各ボタンの確認方法は、りんご押下時は「deep」を指定している「cartChangeDeep」と「りんご」を監視している「cartAppleChange」が呼び出しされます。みかん押下時は、「deep」を指定している「cartChangeDeep」が呼び出しされます。

クリア押下時は、「変数」が初期化される為「CartChangelmmediate」です。「変数」が変更されます。「CartChange」と「cartChangeDeep」が呼び出しされます。

「Vue.js」の$watchは様々な使い方があります。「vue.js」の目的に沿った使い方を紹介しています。ぜひ、参考にしてみてください。

「Vue.js」のウォッチャの使い方のオプション無しの場合はこちらになります。new Vue({ // ...
watch: {監視するデータ: function (新しい値, 古い値) {
// valueが変化したときに行いたい処理},'item.value': function (newVal, oldVal) {// オブジェクトのプロパティも監視できる}}})になります。

「Vue.js」のウォッチャの使い方のオプションがありの場合はこちらになります。new Vue({// ...watch: {list: {
handler: function (newVal, oldVal) {// listが変化したときに行いたい処理},deep: true,immediate:true}}})になります。

「Vue.js」のウォッチャの使い方でインスタンスメソッドで登録する場合はこちらになります。this.$watch('value',function(newVal, oldVal) {// ...})です。

「Vue.js」のウォッチャの使い方でオプション付きインスタンスメソッドで登録するときはこちらになります。this.$watch('value', function (newVal, oldVal) {// ...}, {immediate: true,deep: true})です。

「Vue.js」のウォッチャの使い方で一度だけの指定の場合はこちらになります。

new Vue({el: '#app',
data: {edited: false,list: [{ id: 1, name: 'りんご', price: 100 },{ id: 2, name: 'ばなな', price: 200 },]},created: function() {var unwatch = this.$watch('list', function () {

// listが編集されたことを記録するthis.edited = true// 監視を解除unwatch()}, {deep: true})}})です。

「Vue.js」のJavaScriptはwatchにデータの変数名のキーに対して下の4つのいずれかを渡します。「function」、「メソッド名の文字列」、「連想配列」、「 handler」「deep」「immediate」。「複数指定する場合は上記の配列」。

「deep」は配列の中身が変更された場合も監視イベントを発生させたい場合は「true」にしましょう。「immediate」は変更だけじゃなく「初期化」したい場合も「true」にしましょう。「連想配列」のデータの中身を監視したい場合は「変数名.キー」にしましょう。

「Vue.js」のウォッチャの使い方でTypeScriptの場合は「@watchデコレータ」を使用します。「デコレータ」に「変数名」、任意で「deep」、「immediate」の「真理値」を渡しましょう。

「deep」、「immediate」は「JavaScript」時は同じオプションです。複数のウォッチャーを使用したい時は同じ変数名でWatchの「メソッド」を増やしましょう。変数の中身を監視したい時は「Java」、「Script」と同じ「データ名.キー」にしましょう。」

TypeScriptの場合はこちらになります。<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'; 

@Component
export default class <クラス名> extends Vue {
  @Watch('データ名', {deep: <真理値>, immediate: <真理値>})  <メソッド名>(val, oldVal) {    // 処理  }}</script>

「Vue.js」のdeepでオブジェクトの監視の場合はこちらになります。「handlerプロパティ」、「deep:true」が必要です。

「Vue.js」の$watchは様々な目的の使い方や監視方法も様々あります。目的に沿った使い方や監視方法を参考にしてみてください。使いやすい使い方や監視法を見つけてください。