Vue.js コンポーネントとアロー関数を使用して計算されたプロパティで「this」が定義されていないのはなぜですか?

Vue.js のコンポーネントと計算されたプロパティで「this」への参照が定義されていないのはなぜですか?

Vue.js では、コンポーネントと計算されたプロパティを定義します。計算されたプロパティを利用するには、「this」キーワードを使用する必要があります。ただし、開発者は、特定のシナリオで「this」が「未定義」と評価されるという問題に遭遇することがよくあります。この記事は、この問題が発生する理由を明らかにし、解決策を提供することを目的としています。

ライフサイクル フック (マウントや更新など) または計算されたプロパティでアロー関数 (例: () => {}) を使用する場合、 「this」は、意図された Vue インスタンスと異なる場合があります。 Vue.js のドキュメントでは、そのようなコンテキストではアロー関数を使用しないことを明示的に推奨しています。代わりに、開発者は通常の関数または ECMAScript 5 の短縮構文を使用して、「this」が Vue インスタンスを適切に参照するようにする必要があります。

コンポーネントの例を考えてみましょう。

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

この場合、アロー関数 () => {} は、「this」を Vue コンポーネントの外部の別のコンテキストにバインドします。その結果、関数の外で 'this' を使用してプロパティまたはメソッドにアクセスすると失敗します。

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

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

アロー関数 () = を使用した計算プロパティの値の評価。 > {} を使用すると、「this」が未定義になります。これにより、「未定義のプロパティ 'bar' を読み取れません」というエラーが発生します。

この問題を修正するには、通常の JavaScript 関数または ECMAScript 5 の短縮表現を使用できます。

mounted: function () {
  console.log(this); // correctly logs the Vue instance
}

mounted() {
  console.log(this); // also correctly logs the Vue instance
}

これらの例は、通常の関数または ECMAScript 5 短縮表現が「this」を Vue コンポーネント インスタンスに適切にバインドし、「this」が次のように評価される問題を解決する方法を示しています。 「未定義。」

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