#概要
今回は表題の通り、Vue.jsを使ったアプリケーションにおける
データの流れについて書いていきます。
#Vue.jsにおけるデータフロー
Vue.jsを使用したアプリケーションを「データの流れ」という観点捉えると、
View,Action,Stateという３つの要素に分けることができます。
（この３要素はビュー、更新処理、状態と呼ばれたりする場合もあります）
・View…Stateの内容に応じてブラウザ表示
・Action…Stateの内容を更新
・State…ブラウザ表示に必要なデータの保持
では、実際のコードを元に３要素の流れを確認していきます。
new Vue({
el: '#app',
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
});
<body>
<div id= "app">
<button @click="increment">+1</button>
<p>{{ count }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./script/script.js"></script>
</body>
こちらはボタン押下すると+1されるカウンターアプリです。
（そのままコピペしてJSFIddleで簡単に動かすことができます！）
このアプリでは以下の①〜③の流れを確認できると思います。
①countプロパティの初期値がブラウザに表示される（State→View）
②ボタン押下により、
countプロパティの内容が書き換えられる（Action→State）
③変更されたcountプロパティの内容が、
ブラウザに即時反映される（State→View）
このあと再度ボタンを押下した場合も同様の流れです。
ViewはStateによって規定され、 StateはActionによって規定される、
つまり、全体の処理の中には「State→View→Action」という流れがあり、
この流れの繰り返しがアプリケーションの動きを実現しています。
この流れは「単方向のデータフロー」とも呼ばれ、
データフロー設計において意識すべきポイントの一つになります。
#参考資料
・書籍「Vue.js入門 基礎から実践アプリケーション開発まで」
・書籍「たった1日で基本が身に付く！ Vue.js 超入門」