vue.jsの仕組みについて
初投稿。
今日からvue.jsを学び実際に使っていこうと思いました
まずは仕組みについて勉強したのでまとめました。
サポート
IE8以上のモダン・ブラウザのみサポート
MVVM
vue.jsはMVVMという設計パターンを採用している。
MVVMとは
- Model
- View
- ViewModel
のこと。
【参考】
Webアプリケーション開発者から見た、MVCとMVP、そしてMVVMの違い
Vue.jsでいうと
- Mode：JavaScriptオブジェクトかデータオブジェクト
- View：DOM要素のこと。elのことで
el : '#test'の部分 - ViewModel：Model と View を同期するオブジェクト
VueComponentというものがView+ViewModelを表現してくれてるみたい。
【参考】
ユーザーのアクションに対してViewのUIを適宜表示変更し、同時にViewModel側にも反映し、データ側も書き換える仕組み。
ViewとViewModelをつなげる仕組みが「双方向データバインディング」。
「双方向データバインディング」とはデータ(Data)を結びつける(Bind)機能のこと。
双方向バインディングさせるために、{{}}のMustache構文を使用したり、v-bindのようなディレクティブを使用する。
→ディレクティブとは
HTMLに独自の属性を付与することで、DOM操作を行う機能のこと
【参考】
Vue.jsを使いこなす - Vue.jsとは | CodeGrid
仮想DOM
Vue.jsは仮想DOMを生成し、実DOMからの差分を取り、変更箇所を変更する仕組みにより、無駄なレンダリングの処理を減らしている。
最後にVue.jsはファイルサイズも軽いみたい
| ファイルサイズ | |
|---|---|
| jquery-2.1.0.min.js | 82KB |
| vue.js | 最大でも約30KB |
【参考】
