📑

vue.jsのcomputedとmethodsの使い分け

2021/07/16に公開

vue.jsには算出プロパティを意味する「computed」と関数を意味する「methods」があります。

少しオブジェクト指向を知っている人ならプロパティ とメソッドは全然別物だということが分かりますが、Vue.jsのcomputedでは計算ができてしまうので、実際にできることととしてはほとんど変わらないのです。

では、どういうときにプロパティを使って、どういうときにメソッドを使えば良いのでしょうか？

computedとmethodsの大きな違いはキャッシュ機能があるかどうか

computedにはキャッシュ機能がありページをリロードしてもキャッシュした値を表示するため、データが変わらない限りは再計算は行われません。
一方でmethodsにはキャッシュ機能がないため、たとえデータが変わらない場合でもページをリロードする度に新しく実行されることになります。

ということを念頭において以降ご覧ください。

リアクティブなデータとは、監視され変更され得るデータのことです。
例えば加工・計算された後のデータなどがこれに当てはまります。

具体例としては姓と名を合体させてフルネームを表示した場合はcomputedが適切です。

fullName: function() {
    return this.familyName + ' ' + this.firstName
}

これは、familyName, firstNameの変更があった場合に検知されて、fullNameの値が変わります。これがリアクティブデータです。

最初に描画したときに、「Vue 太郎」と表示した場合はこの値がキャッシュされて、familyNameかfirstNameが変わらない限りはこのキャッシュされた値を表示します。

他にも、商品がある場合は商品の件数を表示して、商品がない場合は商品がありませんと表示する場合はこのように記述します

itemsMessage: function() {
    return this.items.length > 0 ? `${items.length}件の商品があります` : '商品はありません'
}

リアクティブなデータは基本的にキャッシュにいれる方が、必要以上に計算しなくなるというメリットがあります。

例えば、computed内で乱数や日付などを使用している場合は、依存関係にあるデータが更新されない限りキャッシュの値を使用しつづけるので、computedで用いない方が良いでしょう。

randomNumber: function() {
    return `乱数: ${Math.random()}`
}

randomNumber: function() {
    return `日付: ${new Date()}`
}

この場合はキャッシュを使用しつづけるので、乱数を表示しようとしても、何度ページをリロードしてもrandomNumberの値は変わりません。

日付も同様で、キャッシュを使用しているので値は変わりません。

このようにキャッシュ機能があることで、本来期待していた動きが出来ない場合もあるので、要注意です。

api呼び出し、モーダル表示、ページ遷移などデータ加工・計算以外の処理はmethodsに入れます。
methodsはどのプログラミング言語にもある「関数」なので分かりやすいかと思います。

getUsers: () {
    axios.get('http://localhost/users').then(rs => {
        this.users = rs.data.users
    })
}

showModal: () {
    this.$modal.show("user-register-modal");
}

computedに入れられないものは全部関数という認識で良いと思います。

computedに何を入れるべきかを知っておくと、より上手にcomputedとmethodsの使い分けができます。
これまでmethodsで全部済ませてきたという方も、 computedのキャッシュ機能を十分に使いこなしてみてくださいね！