Vue.js でアロー関数が計算されたプロパティを破壊するのはなぜですか?

計算された Vue プロパティでの Arrow 関数の使用

Vue.js では、計算されたプロパティのデータとロジックを処理することが重要です。ただし、これらの計算プロパティ内でアロー関数を使用すると、予期しない動作が発生する可能性があります。

このコード スニペットに示すように、計算プロパティに従来の関数宣言を使用すると、当初は期待どおりに機能していました。

computed: {
  switchRed: function() {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

ただし、計算されたプロパティで矢印関数に切り替えると、値が正しくても色の変更が機能しなくなるという問題が発生しました。 updated.

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

この問題は、アロー関数がこのコンテキストを、計算されたプロパティが定義されている Vue インスタンスにバインドしないために発生します。通常、計算されたプロパティはこれをインスタンスにバインドし、インスタンスのデータとメソッドへのアクセスを許可します。ただし、アロー関数を使用すると、親のコンテキストが保持されます。これは通常、JavaScript のグローバル スコープであり、Vue インスタンスではありません。

その結果、this.turnRed がアロー関数内で未定義になり、色の変更は失敗します。この動作は Vue.js ドキュメントに記載されており、この理由によりインスタンス プロパティまたはコールバックにアロー関数を使用しないことを推奨しています。

この問題を解決するには、計算されたプロパティに対して従来の関数宣言の使用に戻してください。これが適切にバインドされていることを確認します。

以上がVue.js でアロー関数が計算されたプロパティを破壊するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。