[解決済み] VueJS: なぜ "this "は未定義なのですか？

質問

コンポーネントを作成する際に Vue.js .

を参照すると this のいずれかに ライフサイクルフック ( created , mounted , updated など) と評価されます。 undefined :

mounted: () => {
  console.log(this); // logs "undefined"
},

同じことが、私の計算されたプロパティの内部でも起こっています。

computed: {
  foo: () => { 
    return this.bar + 1; 
  } 
}

以下のようなエラーが出ます。

Uncaught TypeError: 未定義のプロパティ 'bar' を読み取ることができません。

なぜ this に評価されるのでしょうか？ undefined と評価するのでしょうか？

どのように解決するのですか？

これらの例では、どちらも 矢印機能 () => { } を束ねる this をVueのインスタンスとは異なるコンテキストにバインドします。

のように のドキュメントによると :

インスタンスのプロパティやコールバックで矢印関数を使わない（例えば vm.$watch('a', newVal => this.myMethod()) ). 矢印関数は親コンテキストに束縛されるからです。 this は期待するようなVueのインスタンスにはならず this.myMethod は未定義になります。

への正しい参照を得るために this をVueのインスタンスとして正しく参照するには、通常の関数を使用します。

mounted: function () {
  console.log(this);
}

また、この他に ECMAScript 5 のショートハンド を関数のために使うこともできます。

mounted() {
  console.log(this);
}