

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

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

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

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

[code]

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

* * *
[code]

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

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


CC BY-SA 4.0
2018-10-16T12:01:32.767
49353
2019-12-11T03:03:25.457
2018-10-16T15:11:13.390
30213
30213
question
javascript vue.js
this.$watchとwatchの違いについて


同じ動きかというとすこし違うかもしれません。APIドキュメント([API —
Vue.js](https://jp.vuejs.org/v2/api/#watch))より引用しますと、

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

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

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

[code]

    <button @click="handler">Register watch handler</button>
    
[/code]

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


CC BY-SA 4.0
2018-10-16T15:24:23.820
49360
2018-10-16T15:24:23.820
2376
49353
answer