1. ライフサイクルと差分レンダリング(patch)の実行
先ほど述べた通り、Vue.jsでは diff / patch の処理を以下のファイルのpatch関数内に実装しています。
Vue.jsにもライフサイクル関数がいくつか提供されています。
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
公式ページに描かれている図がわかりやすいです。
new Vue()でVueインスタンスを作成します。 VueインスタンスはVueコンポーネントを適用するセレクタの指定や、 データバインディングしたいデータとDOMの設定を保存します。
Vue Lifecycle Event
Vueクラス自体が持つeventの発火タイミングはこの図が全てを表しています。イベント発火のタイミングが分からなかったら上の図を見れば解決します。それぞれのイベントに対して関数を設定できます。(よく使うのはmount関連とupdate関連のイベント)
mountedでイベント設定を行うことによりjQueryなどの他ライブラリのイベントトリガーをVueComponent構築時に設定できます。
データバインディング
data:
Vueインスタンスに紐づくモデルのメンバ変数を指定します。変数名をkeyで、値をvalueで設定するとデータバインディングされます。連想配列でvalueを設定するなどプロパティのネストも可能です。data.styleやdata.classなどサーバ側に送信しないプロパティをオブジェクトで保持し、input要素などサーバへの送信が必要なデータ構造はprimitive型で保持するのが良いでしょう。これによってサーバサイドのモデルと共通なデータ構造を持つモデルをjsに受け渡しやすくなります。
methods:
Vueインスタンスのinstanceメソッドを定義します。第一引数にeventオブジェクトがインジェクトされイベントハンドルされたDOMにもアクセスできるため、Vueコンポーネントに含まれないDOMのイベントリスナーに設定することで外部のDOMのプロパティに対してデータバインディングができます。関数の展開、eventオブジェクトを明示的に受け渡す方法についてはこちら。
イベントハンドリング
watch:
指定したプロパティのvalue変更時のコールバックを設定できます。
computed:
keyに任意の関数名(ただし、data配下のプロパティ名と重複するとオーバーライドされてしまうため避ける)を設定し、valueに関数を指定します。この関数は、内部で使われているVueインスタンスのdataで設定されたプロパティを自動的にwatchし、それらのプロパティの変更時のコールバックとして発火します。複数のプロパティを同時に監視したいときはwatchよりcomputedを使うべきです。また、computed配下のプロパティは複数指定可能なので、関数名を変えることで同じ変数をwatchしていてもデータバインディングしたいDOMによってプロパティ更新時の動作を別々に設定することができます。
