blog logo

Vue.jsのcomputedとmethodsの違いを解説

thumnail
2019-05-10

computed(算出プロパティ)について

computedの特徴

公式サイトには次のように書かれていた。

A computed property is used to declaratively describe a value that depends on other values. When you data-bind to a computed property inside the template, Vue knows when to update the DOM when any of the values depended upon by the computed property has changed. This can be very powerful and makes your code more declarative, data-driven and thus easier to maintain.

参照元:「Vue.js」 https://012.vuejs.org/guide/computed.html

computedプロパティは他のプロパティを使ってcomputedプロパティ内のロジックによる演算した結果を返すプロパティだ。なので必ずreturnを書かないとVueがエラーを吐く。computedの特徴として、演算に使用したデータの値が変わると、再度計算を行いDOMを更新してくれる。computedプロパティはリアクティブなオブジェクトしての機能も保持しているとも言える。

computedの特徴

  • 業務ロジックをまとめて綺麗に記述できる
  • 計算結果をキャッシュできる為メモリの節約効果がある

tmplate内の可読性の低下を防ぐ

template内にロジックをベタ書きしてしまうと、ロジックが複雑だった場合コードの可読性が一気に低下する。なので複雑なロジックは、直接template内にはロジックは書かず、算出プロパティに書くという方法が公式サイト側から推奨されている。

計算結果をキャッシュに保存できる

算出プロパティは計算結果をキャッシュに保存する。なので一度計算したらその後、算出プロパティが参照された時キャッシュしていたデータを返すだけでいいのでブラウザのメモリの節約になる。再度、計算を行うタイミングは依存するデータの値が更新された場合だ。

methodsの特徴

methodsにはそのコンポーネント内で使用する関数を定義する。算出プロパティとの違いは

  • 戻り値を定義しなくてもいい
  • 計算結果がキャッシュされない

である。例えばクリックされたらアラートを表示する為のプロパティの値をtrueにする関数を作りたい時、この関数は戻り値を必要としませんのでmethodsを使って定義する。

computedとmethodsの違いを比べる

時刻でキャッシュされているかどうかを調べる

キャッシュする場合(computed)としない場合(methods)でどのような違いが生じるのか、実際にコードを見て確認してみる。

<html>
<body>
    <div id="app">
        <button type="button" @click="show=!show">表示/非表示</button>
        <div v-if="show">
            Method: <span v-text="nowMethod()"></span>
            <br>
            Computed: <span v-text="nowComputed"></span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <script>

        new Vue({
            el: '#app',
            data: {
                show: true
            },
       // キャッシュされない
            methods: { 
                nowMethod: function() {

                    return Date.now();  

                }
            },
       //キャッシュされる
            computed: { 
                nowComputed: function() {

                    return Date.now(); 

                }
            }
        });

    </script>
</body>
</html>

このコードはボタンが押されるごとにvueのディレクティブ、v-textの表示が切り替わる簡単なvueのプログラムだ。表示が切り替わるたびにmethods、computedの関数が呼ばれる。ボタンを押したときに表示は次にようになる。

methods computed
時間がボタンを押したときの時刻 画面を生成したときの時間

これは実行結果をキャッシュするかしないかによって結果に違いがでている。methodsの処理はキャッシュされないため、ボタンを押したときにもう一度methods内の処理が実行される。一方computedの処理はキャッシュされるのでボタンを押しても、画面生成時に処理された結果のキャッシュを使用するのでこのような結果になる。

まとめ

  • computedはキャッシュ保存/戻り値が必要
  • methodsはキャッシュは保存しない/戻り値が不要
profile

KATUO

web developer

六本木のミドルベンチャーでwebエンジニアをやってます。普段はフロントからサーバーサイド、インフラ周りといった領域を幅広く触ってます。

twitter-icongithub-icon

KATUBLO

Copyright since 2018 KATUO All Rights Reserved.