Vue.jsでアロー関数は危険

アロー関数というのはJavascript(ECMAscript)のfunctionに似ていて、実は似ていない記法です。

普通の関数との違いは2つ。

一つは書き方

// 通常の関数
const func1 = function(userName){
    console.log(`Hello ${userName}!`);
}

// アロー関数
const func2 = (userName) => {
    console.log(`Hello ${userName}!`);
}
// インラインでかけたりする
const func3 = (userName) => console.log(`Hello ${userName}!`);

もう一つはthis。

こちらが厄介で、「アロー関数はthisを束縛しない」というようなニュアンスで説明されています。

どういうことかというと、アロー関数内でアクセスされるthisは、関数を呼び出したオブジェクトになるということです。

たとえば以下のように、methodsに定義する関数をアロー関数で書いてしまうと、

export default{
    name: "index",
    data: function(){
        return {
            num: 1;
        }
    },
    methods: {
        func1: () => {
            return this.num*2
        }
    }
}

methodsがthisの指し示すオブジェクトになってしまうため、data.numにはアクセスできません。

なのでVueを使うときはこの辺を意識していないとかなりハマります。