computedとmethodsの違い ~Laravel x Vue成長日記~ #4

computed vs methods

Vueの公式サイトにも解説されているこれらの比較ですが、実際手を動かして確認してみました。

算出プロパティ vs メソッド

computed

messageというデータを返すだけの算出プロパティを用意しました。

{{ message }}と{{ computedShowMessage }}は同じ内容が出力されます。

またボタンを配置し、クリックされるとmessageに’ clicked’という文字列を追加するようにしています。

そのボタンをクリックすると

{{ message }}と{{ computedShowMessage }}のどちらも’hello world clicked’

と出力されました。これはリアクティブなデータ(message)を更新したタイミングでcomputed(算出プロパティ)が再評価されるためです。

このボタンをクリックする度に、埋め込んでおいた’executed computed showMessage’というログがコンソコールに出力されているはずです。

<template>
    <div class="container">
        <!-- hello world -->
        <div>{{ message }}</div>

        <!-- computed -->
        <div style="margin-top: 20px; border-top: 1px solid;">
            computed message
            <div>{{ computedShowMessage }}</div>
            <button @click="message += ' clicked'">Change message</button>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                message: 'hello world',
            }
        },
        computed: {
            computedShowMessage: function () {
                console.log('executed computed showMessage')
                return this.message
            }
        },
    }
</script>

methods

次にcomputedと同様にmessageというデータをそのまま返すmethodを用意しました。

こちらの例でもcomputedと全く同じ結果が得られることになります。

出力されるテキストも同じになりますし、呼び出されるタイミングも同じです。

しかし、methodsの呼び出しの異なる点は、再描画が行われと毎回実行されるということです。

<template>
    <div class="container">

        <!-- hello world -->
        <div>{{ message }}</div>

        <!-- metohd -->
        <div style="margin-top: 20px; border-top: 1px solid;">
            metohd message
            <div v-text="showMessage()"></div>
            <button @click="message += ' clicked'">Change message</button>
        </div>

    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                message: 'hello world',
            }
        },
        methods: {
            showMessage: function () {
                console.log('executed method showMessage')
                return this.message
            }
        },
    }
</script>

ちなみにここのサンプルでv-textというディレクティブを使用してみました。

v-text=”hoge” はコンパイルされると {{ hoge }}にされるため、同義となります。

computedとmethodsの違い

上記の二つの例を組み合わせて、さらにflagというデータを追加しflagを切り替えるボタンを配置しました。

messageを更新するボタンをクリックするとどちらも同様に描画が更新され、コンソールのログにも’executed computed showMessage’と’executed method showMessage’が一度ずつ出力されていることが確認できます。

そして次にflagを更新してみましょう。
flagを切り替えられるボタンをクリックすると{{ flag }}の描画が切り替わることが確認できます。
そしてコンソールのログをみてみるとメソッドが実行されたことを表す’executed method showMessage’がflagを切り替える度に出力されています。

flagを更新するタイミングではリアクティブなmessageが更新されていないのでcomputedはキャシュされた結果を返しているのに対し、flagが更新されて再描画されるタイミングでmethodsは毎回実行されているのことが確認できました。

<template>
    <div class="container">

        <!-- hello world -->
        <div>{{ message }}</div>

        <!-- toggle flag -->
        <div style="margin-top: 20px; border-top: 1px solid;">
            <button @click="flag = !flag">Toggle flag blow</button>
            <div>{{ flag }}</div>
        </div>

        <!-- computed -->
        <div style="margin-top: 20px; border-top: 1px solid;">
            computed message
            <div>{{ computedShowMessage }}</div>
            <button @click="message += ' clicked'">Change message</button>
        </div>

        <!-- metohd -->
        <div style="margin-top: 20px; border-top: 1px solid;">
            metohd message
            <div v-text="showMessage()"></div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                message: 'hello world',
                flag: true,
            }
        },
        computed: {
            computedShowMessage: function () {
                console.log('executed computed showMessage')
                return this.message
            }
        },
        methods: {
            showMessage: function () {
                console.log('executed method showMessage')
                return this.message
            }
        },
    }
</script>

computedとmethodsの使い分け

computed

• コストのかかる処理
• リアクティブな要素に依存している処理

methods

• computed等の処理をまとめて関数として呼び出す

まとめ

ドキュメントを呼んでいるだけだと「ふーん」で終わることですが、

実際手を動かしてみて「ふーん」が身につきました！