今回はVue.jsの特徴的な機能の一つであるウォッチャを紹介します。
Notice
記事中のCodePenは右上の "Edit on CodePen" からコード編集画面に遷移できます。
ぜひ手元でコードを変えて結果を確かめてみてください。理解が早まると思います。
前提
| マシーン | ブラウザ | Vue |
|---|---|---|
| macOS Sierra 10.12 | Firefox Quantum | ver. 2.5 |
ウォッチャ（watchプロパティ）
ウォッチャは監視プロパティとも呼ばれ、あるデータが変更されたタイミングで何か処理を実行したいときに用いられます。 データに対するchangeイベントハンドラのようなイメージでいいでしょうね。
今回は例として簡単な入力フィールドのリアルタイムバリデーションを作ってみました。
See the Pen Vue Watch by Masahiro Harada (@MasahiroHarada) on CodePen.
設定プロパティに watch というキーが登場しています。
var app = new Vue({
el: '#app',
data: {
email: '',
username: '',
error: {}
},
watch: {
email: function (value) {
// 略
},
username: function (value) {
// 略
}
}
})ご覧になっていただいてなんとなくわかるかもしれませんが、watch の値にはオブジェクトを指定し、そのオブジェクトは data にあるデータの名前と同じ名前のキーを持っています。
data のプロパティに変更があった場合は watch の同名メソッドが自動的に実行されます。
つまり data の email プロパティに変更があった場合は watch の email メソッドが自動的に実行されるわけです。
この性質から、methods や computed に指定するメソッドの名前は任意でしたが、watch に指定するメソッド名は data のプロパティ名に依存します。
また watch に指定するメソッドは引数を二つ取ります。
一つ目の引数は変更後の新しい値、二つ目の引数は変更前の値です。
watch: {
something: function (newValue, oldValue) {
// 略
}
}上記の例では変更後の値しか使わないので第一引数しか記述していません。
あとはCodePenでコードと動きを見てもらえれば機能については理解できるのではないでしょうか。
ウォッチャの使いどころ
ウォッチャは特定のデータの変更をトリガーに一連の処理を実行します。
例えばある検索フォームの値が変わったタイミングで自動的にAjax通信を行って結果を一覧表示する、というような処理はウォッチャを使って実装可能です。
ただ、上の検索フォームのように監視の対象がフォームの入力フィールドである場合（大抵そうだと思いますが）、@change イベントで代用できてしまいます。
動きとしてはどちらでも変わらないのでしょうが、私だったら一貫性を保つため @change イベントを使うと思います。@change イベントを使うべきときとウォッチャを使うべきときの違いが説明できないからです。
そういう風に言ってしまうとあまりウォッチャの出番は多くないような感じになってしまいますが、実際私自身もそんなに使いたくなることがないような…。まぁただコードを読んでいて出くわすこともあるかもしれませんし、vue-routerを利用する際には登場しますので、一機能として覚えておいてください。
今回はVue.jsのウォッチャを紹介しました。
より詳しくはマニュアルを参照してください。
算出プロパティとウォッチャ — Vue.js
