Vue.jsではアロー関数を使用するべきではない

概要

Vue.jsではアロー関数を使用するべきではない。

アロー関数を使用してしまうと、thisがVueインスタンスを指し示さなくなるので、参照したいプロパティがundefinedとなってしまい、意図した挙動にならない。

『Vue.js入門』のp49のサンプルプログラムを例に説明する。

以下のようにcomputedプロパティを表示する。

<p>合計: {{ totalPriceWithTax }}円</p>

①正しい書き方

computed: {
    totalPrice: function () {
        return this.items.reduce(function (sum, item) {
            return sum + (item.price * item.quantity)
        }, 0);
    },
    totalPriceWithTax: function () {
        return Math.floor(this.totalPrice * 1.08);
    }
}

→ 「合計: 648円」のように正しく表示される。

②誤った書き方

computed: {
    totalPrice: () => {
        return this.items.reduce((sum, item) => {
            return sum + (item.price * item.quantity)
        }, 0);
    },
    totalPriceWithTax: () => {
        return Math.floor(this.totalPrice * 1.08);
    }
}

→ 「合計: NaN円」と表示されてしまう。
→ this.totalPriceがundefinedになることが原因である。

公式ドキュメントを読むと、ちゃんとアロー関数を使用するべきではないという注意が記載されていた。
jp.vuejs.org

経緯

『Vue.js入門』の2章「Vue.jsの基本」をサンプルプログラムを書きながら勉強していた。

本書のサンプルプログラムは旧来のfunctionを使った記法で書かれていたが、私がちょうどES6の文法を勉強したあとだったので、練習がてらアロー関数を使った記法で書いてみたところ、アロー関数を使用したこと以外はサンプルプログラム通りに書いたはずなのに、表示が「合計: NaN円」となってしまう事象にぶち当たった。

デバッグしたところ、this.totalPriceがundefinedになっていることに気づいた。

アロー関数は旧来のfunctionとはthisの参照先が異なるという話をどこかで聞いた記憶があったので、アロー関数が原因ではと思い調べたところ、予想通りだった。