Vue.js tips - $watch を使ってデータの変更を監視しよう
10 years ago
オレの Advent Calendar 2015 - Adventar の 5 日目です.
ちょっとした tips です. Vue.js でデータの変更を監視する方法.
Rusntant Demo
デモです. input field に値を入力すると, コンソールに変更結果が出力されます.
$watch を使って変更を監視しよう
Vue.js で生成したオブジェクトは $watch というメソッドを持っています.
これを使うことで登録しているデータの変更を監視することができます.
使い方はカンタンです.
$watch(キー名, 変更時のコールバック) といった形で実行するだけです.
今回サンプルではこんな感じです.
demo.$watch('message', function(now, prev) {
console.log('changed:', prev, '->', now);
});
この場合, demo の message データが変更されると登録した関数が実行されて,
前の値(prev) と今の値(now) が表示されます.
監視を解除しよう
以前のバージョンでは $unwatch ってやつがあったんですが, v0.11 から廃止されています.
代わりに $watch の 戻り値 を実行することで解除できるようになりました.
setInterval と clearInterval の関係に似ていますね.
こんな感じで使えます.
// 監視
var unwatch = demo.$watch('message', function(now, prev) {
console.log('changed:', prev, '->', now);
// 監視を解除
unwatch();
});
デモ作ったのでよかったら見てください. 一度しか変更をキャッチしないのが分かるかと思います!.
ネストしたデータも監視できるよ!
$watch の第3引数に options を渡すことで deep watch することもできます!!
使い方はこんな感じ.
// 監視
demo.$watch('user', function(now, prev) {
console.log('changed:', prev.name, '->', now.name);
}, {
deep: true, // deep watch を有効にする
});
変更されているのが user の持つ name であってもイベントが発火するのが分かるかと思います.