Vueのhandlerとは

公式ドキュメントを見ながら、Vueの勉強をしています。

簡単なWebアプリTodoリストを作成する公式ドキュメントの作例があり、真似ながらプログラムを書いています。
ToDoリスト例

この作例の中に出てくるhandlerの意味が分かりません。

JavaScript
1    watch: {
2        todos: {
3            handler: function() {
4                todoStorage.save(todos)
5            },
6            deep: true
7        }
8    }

勝手な考察と試したこと

これは、handlerという名前にしているだけなのでしょうか？
それとも、何かしらのプロパティなどですか？
Vueのドキュメントにも書かれておらず、MDNで調べても全然出てきません。
解説、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

ウォッチャがオブジェクト内の変更を感知した際に実行する処理を記載する場所がhandlerです。

例えば以下の①の場合のコードはhandlerが無くても動きますが、②のコードは動きません。
そのため③のコードのようにdeep: trueとhandlerを用いて値の変更を監視します。
①https://jsfiddle.net/svudfLoc/
②https://jsfiddle.net/5gxa10cy/
③https://jsfiddle.net/w0kv2b6x/

追記：
ご提示のToDoリスト例に関しても、ウォッチャが監視している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でのプロパティの変更はウォッチャが感知できずにローカルストレージに保存されない。
そのため、一見すると問題無く動いているように見えるが、実際は期待された動作が正しく行われていない。

投稿2019/10/22 12:54

編集2019/10/22 21:41