Vue.js tips - $watch を使ってデータの変更を監視しよう

phi phi on vue.js

オレの 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);
});

この場合, demomessage データが変更されると登録した関数が実行されて, 前の値(prev) と今の値(now) が表示されます.

監視を解除しよう

以前のバージョンでは $unwatch ってやつがあったんですが, v0.11 から廃止されています.

代わりに $watch戻り値 を実行することで解除できるようになりました. setIntervalclearInterval の関係に似ていますね.

こんな感じで使えます.

// 監視
var unwatch = demo.$watch('message', function(now, prev) {  
  console.log('changed:', prev, '->', now);

  // 監視を解除
  unwatch();
});

デモ作ったのでよかったら見てください. 一度しか変更をキャッチしないのが分かるかと思います!.

runstant

ネストしたデータも監視できるよ!

$watch の第3引数に options を渡すことで deep watch することもできます!!

使い方はこんな感じ.

// 監視
demo.$watch('user', function(now, prev) {  
  console.log('changed:', prev.name, '->', now.name);
}, {
  deep: true, // deep watch を有効にする
});

変更されているのが user の持つ name であってもイベントが発火するのが分かるかと思います.

runstant

Reference