この記事はVue.js Advent Calendar 2016の7日目(代打投稿)です。 Vue.jsも2.0になってVirtual DOMが採用されたので、改めてVirtual DOMについてMVVMとの比較で考えてみます。 いきなり結論っぽい図ですが、これが分かればもうVirtual DOMは理解したといっても過言ではないかと。 MVVM(2-way data binding) ObjectとDOMはそれぞれ独立した状態(値)を持っており、それを双方向に同期する。 キー入力に起因するDOMの更新はDOMが自律的に行う。 Virtual DOM(1-way data flow) DOMはObjectの射影であり、DOMが自律的に更新することは無い。 キー入力はイベントの形でObject側に通知され、Objectの値が変更されることによって、その射影という形でDOMが更新される。 ただ、