0

Vue.jsを勉強している初心者プログラマです、

watchとthis.$watchの違いについて理解ができなかったのですが、
以下の私が記載した二つのソースが同じ動きをするという解釈でよろしかったでしょうか。

テキストなどで調べているのですが、よくわからず、要するにこうなのか、という自分の解釈がピンポイントで説明されている場所を見つける事が出来ませんでした。

下のfugaについては見やすくするために設置しているだけで、特に意味はないです。

data: {
    list: "hoge",
},
methods:{
    fuga: function(){
        //処理①
    }
},
watch:{
    list:{
        handler: function(newVal, oldVal){
            //処理②
        }
    }
}

data: {
    list: "hoge",
},
methods:{
    fuga: function(){
        //処理①
    },
    handler: function(){
        this.$watch('list', function(newVal, oldVal){
            //処理②
        }
    }
}

ご教授よろしくお願いします。

1 件の回答 1

1

同じ動きかというとすこし違うかもしれません。APIドキュメント(API — Vue.js)より引用しますと、

キーが監視する評価式で、値が対応するコールバックをもつオブジェクトです。値はメソッド名の文字列、または追加のオプションが含まれているオブジェクトを取ることができます。Vue インスタンスはインスタンス化の際にオブジェクトの各エントリに対して $watch() を呼びます。

とあるように、前者のコードではそのVueインスタンス初期化時に$watchが呼び出されます。なので、それ以上意識することなくともインスタンスの準備ができた状態ではすでにウォッチャが動作しています。

一方、後者のコードではインスタンスの初期化時にでもthis.handlerを呼び出してやらない限りこのウォッチャは登録されていないことになります。
さらに以下の例のような誤った使い方をしてしまう可能性があります。

<button @click="handler">Register watch handler</button>

これを質問中の後者のコードと合わせて使うとwatchハンドラーが重複して登録されてしまうのは容易に想像できるのではないでしょうか。(さらにはvue-routerと組み合わせた際には初期化時に呼んでいても同様の問題が発生するような)

1
  • 質問のリビジョンをみてみたら編集前の時点ではcreatedで$watchを呼んでいたようですが……もしかして編集時に意図しないコードになっていたりはしませんよね?
    – hinaloe
    Commented 2018年10月16日 15:25

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。