Vueのhandlerとは

Question

公式ドキュメントを見ながら、Vueの勉強をしています。

簡単なWebアプリTodoリストを作成する公式ドキュメントの作例があり、真似ながらプログラムを書いています。
[ToDoリスト例](https://jp.vuejs.org/v2/examples/todomvc.html)

この作例の中に出てくるhandlerの意味が分かりません。
```JavaScript
    watch: {
        todos: {
            handler: function() {
                todoStorage.save(todos)
            },
            deep: true
        }
    }
```


## 勝手な考察と試したこと
これは、handlerという名前にしているだけなのでしょうか？
それとも、何かしらのプロパティなどですか？
Vueのドキュメントにも書かれておらず、MDNで調べても全然出てきません。
解説、よろしくお願いいたします。

Accepted Answer

ウォッチャがオブジェクト内の変更を感知した際に実行する処理を記載する場所が`handler`です。

例えば以下の①の場合のコードは`handler`が無くても動きますが、②のコードは**動きません**。
そのため③のコードのように`deep: true`と`handler`を用いて値の変更を監視します。
①[https://jsfiddle.net/svudfLoc/](https://jsfiddle.net/svudfLoc/)
②[https://jsfiddle.net/5gxa10cy/](https://jsfiddle.net/5gxa10cy/)
③[https://jsfiddle.net/w0kv2b6x/](https://jsfiddle.net/w0kv2b6x/)

**追記：**
ご提示の[ToDoリスト例](https://jp.vuejs.org/v2/examples/todomvc.html)に関しても、ウォッチャが監視している`todos`はオブジェクトを値に持つ配列なので、`handler`を消してしまうと正しく機能せず`todoStorage.save`が発火していないのが分かると思います。
試しに`todoStorageのsaveメソッド`に`alert('fired')`を追記し、どのタイミングで呼ばれているのか確認すると分かりやすいです。
例えば、リストの左にあるチェックボックス（`.toggle`）にチェックを入れると該当の`todos[index].completed`を`true`に変更するので、このタイミングでウォッチャが反応しますが、`handler`を消してしまうと変更を感知できず`todoStorage.save`は発火しません。
またテキストボックス(`.edit`)から`todos[index].title`を編集する時も同じです。
変更後にリロードしてみると、ローカルストレージに保存できていないのが分かると思います。

恐らく__Nero1129さん__が「handlerを消しても動作する」と仰っているのは、`addTodo`を実行した時の事だと思いますが、この場合は配列にオブジェクトをpushしているだけなので`handler`が無くてもウォッチャは変更を感知できます。
そのため`todoStorage.save`が発火しローカルストレージに保存できています。

**まとめ：**
`handler`を消してしまうと、`addTodo`での変更はローカルストレージに保存されるが、`.edit`や`.toggle`でのプロパティの変更はウォッチャが感知できずにローカルストレージに保存されない。
そのため、一見すると問題無く動いているように見えるが、実際は期待された動作が正しく行われていない。

勝手な考察と試したこと

関連した質問