Vue の計算プロパティのアロー関数が予期しない動作を引き起こす場合があるのはなぜですか?

Vue 計算プロパティでのアロー関数の使用: 落とし穴を理解する

Vue.js では、アロー関数を使用して次の構文を簡素化できます。計算されたプロパティ。ただし、計算プロパティでアロー関数を使用すると、正しく使用しないと予期しない動作が発生する可能性があります。

関数定義が正しくありません

次の Vue コード スニペットを検討してください:

computed: {
  switchRed: () => {
    return { red: this.turnRed }
  },
  switchGreen: () => {
    return { green: this.turnGreen }
  },
  switchBlue: () => {
    return { blue: this.turnBlue }
  }
}

計算プロパティでアロー関数を使用する場合、そのスコープ動作を認識することが重要です。アロー関数は、this キーワードを Vue インスタンスにバインドしません。代わりに、周囲のコンテキスト (この場合は Vue コンポーネントのグローバル スコープ) から this バインディングを継承します。

間違った定義の結果

結果関数定義が間違っているため、計算されたプロパティ内の this キーワードは Vue インスタンスを参照せず、グローバル Vue.js インスタンスを参照します。これにより、プロパティturnRed、turnGreen、turnBlueに対して未定義の参照エラーが発生します。その結果、計算されたプロパティは空のオブジェクトを返し、色の変更動作は期待どおりに動作しません。

正しい関数定義

この問題を解決するには、次のことが必要です。 this コンテキストを Vue インスタンスに明示的にバインドします。これを行うには、従来の関数構文を使用できます。

computed: {
  switchRed: function() {
    return { red: this.turnRed }
  },
  switchGreen: function() {
    return { green: this.turnGreen }
  },
  switchBlue: function() {
    return { blue: this.turnBlue }
  }
}

従来の関数構文を使用することにより、計算されたプロパティ内の this キーワードが Vue インスタンスを参照するようになります。これにより、計算されたプロパティが意図したとおりに Vue インスタンスのデータにアクセスして操作できるようになります。

重要な注意

arrow を使用する場合は、Vue.js ドキュメントのガイダンスに従うことが重要です。機能。ドキュメントによると、「インスタンス プロパティまたはコールバックではアロー関数を使用しないでください (例: vm.$watch('a', newVal => this.myMethod()))。アロー関数は親コンテキストにバインドされているため、 、これは期待どおりの Vue インスタンスではなく、this.myMethod は未定義になります。"

以上がVue の計算プロパティのアロー関数が予期しない動作を引き起こす場合があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。