概要

今回は表題の通り、Vue.jsを使ったアプリケーションにおける
データの流れについて書いていきます。

Vue.jsにおけるデータフロー

Vue.jsを使用したアプリケーションを「データの流れ」という観点捉えると、
View,Action,Stateという３つの要素に分けることができます。
（この３要素はビュー、更新処理、状態と呼ばれたりする場合もあります）

・View…Stateの内容に応じてブラウザ表示
・Action…Stateの内容を更新
・State…ブラウザ表示に必要なデータの保持

では、実際のコードを元に３要素の流れを確認していきます。

script.js

new Vue({
    el: '#app',
    data() {
        return {
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        }
    }
});

index.html

<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 超入門」

【Vue.js】Vue.jsを使ったアプリケーションのデータフロー

概要

Vue.jsにおけるデータフロー

参考資料