質問: Vue.jsを勉強している初心者プログラマです、 watchとthis.$watchの違いについて理解ができなかったのですが、 以下の私が記載した二つのソースが同じ動きをするという解釈でよろしかったでしょうか。 テキストなどで調べているのですが、よくわからず、要するにこうなのか、という自分の解釈がピンポイントで説明されている場所を見つける事が出来ませんでした。 下のfugaについては見やすくするために設置しているだけで、特に意味はないです。 ``` data: { list: "hoge", }, methods:{ fuga: function(){ //処理1 } }, watch:{ list:{ handler: function(newVal, oldVal){ //処理2 } } } ``` --- ``` data: { list: "hoge", }, methods:{ fuga: function(){ //処理1 }, handler: function(){ this.$watch('list', function(newVal, oldVal){ //処理2 } } } ``` ご教授よろしくお願いします。
回答: 同じ動きかというとすこし違うかもしれません。APIドキュメント(API — Vue.js)より引用しますと、 > > キーが監視する評価式で、値が対応するコールバックをもつオブジェクトです。値はメソッド名の文字列、または追加のオプションが含まれているオブジェクトを取ることができます。Vue インスタンスはインスタンス化の際にオブジェクトの各エントリに対して `$watch()` を呼びます。 > > > とあるように、前者のコードではそのVueインスタンス初期化時に`$watch`が呼び出されます。なので、それ以上意識することなくともインスタンスの準備ができた状態ではすでにウォッチャが動作しています。 一方、後者のコードではインスタンスの初期化時にでも`this.handler`を呼び出してやらない限りこのウォッチャは登録されていないことになります。 さらに以下の例のような誤った使い方をしてしまう可能性があります。 ``` Register watch handler ``` これを質問中の後者のコードと合わせて使うとwatchハンドラーが重複して登録されてしまうのは容易に想像できるのではないでしょうか。(さらにはvue-routerと組み合わせた際には初期化時に呼んでいても同様の問題が発生するような)