Vue.js ライフサイクル フックと計算プロパティで「this」が未定義になるのはなぜですか?

VueJS: "this" ライフサイクル フックと計算されたプロパティで未定義

Vue.js では、"this" にアクセスする状況が発生する可能性があります。ライフサイクル フックまたは計算されたプロパティ内の「キーワード」は「未定義」を返します。これは、アロー関数が使用されている場合に発生します。

原因:

アロー関数 () => {} は、「this」キーワードを Vue インスタンスの外部のコンテキストにバインドします。これは、アロー関数内の「this」は、Vue インスタンス自体ではなく、親スコープを参照することを意味します。

例 1:

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

この例では、 「マウントされた」フックに使用されるアロー関数は、「this」を Vue インスタンスにバインドしません。

例2:

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

ここでは、計算されたプロパティはアロー関数を使用しています。これにより、「this.bar」への参照が未定義と評価され、「プロパティ 'bar' を読み取れません」というエラーが発生します。 「

解決策:

この問題を解決してアクセスするには「this」を正しく参照するには、通常の関数または ES5 短縮表記:

通常関数:

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

ES5 短縮表記:

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

以上がVue.js ライフサイクル フックと計算プロパティで「this」が未定義になるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。