Vue.jsのcomputedとdataの使い方の違い

Vue.jsを最初に触るとき、computedにデータ置くのとdataで持つのどう違うの…

と思っていた頃がありました。違いをしっかり認識してそれぞれの特性を生かしてイケてるコードを書いていきましょう！では、いきましょう！

export default {
    data () {
        return {
            name: null
        }
     },
     computed: {
         user () {
             return this.$store.state.user.list;
         }
     }
}    

computedの特徴

computedはリアクティブにデータを取り扱うことができ、変更を自動で検知して再代入されているように見せることができます（いわゆるが監視できる）。また、templateで直接computedに定義してある変数を変更することはできません。つまり、read onlyのデータとして保持することができます。storeに保持しているだけのデータを参照する際などに使い勝手がいいかもしれませんね！一覧を表示する画面などでは、DBから取得してきたデータをstoreに保持し、そのデータをcomputedで参照する、というような使い方が僕は多いです。

dataの特徴

一方、dataで置いておくデータは、フォームに関連する（v-model）変数などtemplateで書き換えるようなデータを保持することが多いかと思います。また、dataはreturnすることによって同一コンポーネントを複数生成した際にコンポーネント別にデータを変更することができます。data: { name: null }のように変数的にデータを保持しなかった場合、共通の変数だと認識し、同じコンポーネントですべて同じ値を参照してしまうことがありますので注意が必要です。

今回はdataとcomputedのデータの持ち方や特徴の違いを紹介しました。

それぞれの特徴を生かしたコードが書けるよう理解して使っていきましょう！