はじめに
「watch」とは、特定のデータまたは算出プロパティの状態を監視して、変化があったら処理を自動的に実行する。
データの変化をがトリガーになる。
使い方
大きく分けて２種類の書き方がある。
１．watchオプションに定義
１つ目はコンポーネントのwatchオプションに、監視したいデータの名前と変化した時に呼び出されるハンドラを定義する方法
第１引数として「新しい値」、第２引数として「古い値」を受け取ることができる。
sample.js
new Vue({
watch: {
監視するデータ: function(新しい値, 古い値) {
// データが変化した時に行いたい処理
},
// オブジェクトのプロパティも監視できる
'item.value': function(新しい値, 古い値) {
// 処理
}
}
})
オプション
watchの定義ではオプションを任意で設定できる。それぞれ設定値はBoolean
deep： ネストされたオブジェクトも監視する
immediate：初期表示時にも呼び出す
オプションを使用する場合は、handlerプロパティにハンドラを定義。
handlerはオプションを使用するときに必要になるオブジェクトのこと
sample.js
new Vue({
el: 'app',
data: {
list: [
{ name: '太郎', age: 10 },
{ name: '花子', age: 12 }
]
},
watch: {
list: {
handler: function(newVal, oldVal) {
// listが変化した時に行いたい処理
},
deep : true,
immediate: true
}
}
});
watchはデフォルトの状態では、指定したプロパティの値しか監視しない。
つまりdeepがfalseだとlistに格納されているオブジェクトのプロパティが更新されても処理が実行されない。
sample.js
this.list[0].age = 11;
trueにすることでこのような配列要素内のプロパティ（入れ子やネストしたプロパティ）更新時にも呼び出される。
２．メソッドに定義
もう１つの方法は、各メソッド内でウォッチャを登録する方法。
インスタンスメソッドthis.$watchを使用。以下のように引数を渡す。
script.js
this.$watch('監視したいデータ',ハンドラ（関数）,オプション)
sample.js
// ライフサイクルのcreatedにwatchを登録
created() {
this.$watch('value', function(newVal, oldVal) {
// 処理
}, {
deep: true,
immediate: true
})
}
監視の解除
インスタンスメソッドで登録した場合、返り値を使用して監視を解除できる。
script.js
var unwatch = this.$watch('value', handler)
unwatch()
一度だけ監視
一度監視して、監視を解除することもできる。
script.js
new Vue({
el: 'app',
data: {
edited: false,
list: [
{ name: '鉛筆', price: 98 },
{ name: '消しゴム', price: 100 }
]
},
created() {
var unwatch = this.$watch('list', function() {
// データlistが変更されたらeditedをtrueにし、
this.edited = true
// データが変更されたら監視を解除
unwatch()
}, {
deep: true
})
}
})
参考