アロー関数を含む Vue.js コンポーネントで「this」が未定義なのはなぜですか?

Vue.js コンポーネントの "this" の予期しない未定義の値

Vue.js コンポーネントを構築するとき、ライフサイクル フック内で "this" にアクセスするまたは、計算されたプロパティによって予期しない「未定義」の結果が生じる可能性があります。構文 "() => {}" で示されるアロー関数は、Vue インスタンス コンテキストの外側で "this" のバインディングを変更します。

ライフサイクル フック

提供された例では:

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

アロー関数は、「this」を外部のスコープにバインドします。 Vue インスタンス。「未定義」評価につながります。

計算されたプロパティ

同様に、計算されたプロパティ内:

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

アロー関数は「this」のバインディングが異なるため、「未定義のプロパティ 'bar' を読み取れません」というエラーが発生しますerror.

解決策

この問題を解決し、Vue インスタンスとして "this" への正しい参照を確保するには、次の手法の使用を検討してください:

1. 通常関数: 示されているように、通常の関数構文を使用します。作成者:

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

2. ECMAScript 5 短縮表記: あるいは、ECMAScript 5 関数短縮表記:

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

を使用することもできます。これらのメソッドを採用することで、Vue.js コンポーネント内で「this」の適切なバインディングを確立し、アクセシビリティを確保できます。コンポーネントのプロパティとメソッドが期待どおりに反映されます。

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