Vue.js のアロー関数で「this」が定義されていないのはなぜですか?

VueJS: 「この」未定義の問題を解決する

アロー関数は VueJS の落とし穴となり、予期しない未定義値が発生する可能性があります。これは、アロー関数が Vue インスタンスにバインドするのではなく、親のコンテキストを継承するためです。

ライフサイクル フック

マウントされたようなライフサイクル フックでアロー関数を使用する場合、これは Vue インスタンスを指すものではありません。代わりに、親コンテキストを参照します。親コンテキストは、通常、マウントされたフックをトリガーした HTML 要素または Vue コンポーネントです。

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

計算されたプロパティ

アロー関数計算されたプロパティでも未定義の値が発生します。親コンテキストを継承するため、これは Vue インスタンスを参照しません。

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

これにより、エラー「Uncaught TypeError: Cannot read property 'bar' of unknown」が発生します。

解決策

これを解決するには、アロー関数の代わりに通常の関数または ECMAScript 5 関数の短縮表記を使用します。

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

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

これらのメソッドを使用すると、これは常に Vue インスタンスを参照し、ライフサイクル フックと計算されたプロパティで期待される動作を提供します。

以上がVue.js のアロー関数で「this」が定義されていないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。