アロー関数が Vue の計算プロパティを壊すのはなぜですか? それらを修正するにはどうすればよいですか?-jsチュートリアル-php.cn

アロー関数が Vue の計算プロパティを壊すのはなぜですか? それらを修正するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-26 03:33:18

オリジナル

430 人が閲覧しました

Why Do Arrow Functions Break Vue Computed Properties, and How Can I Fix Them?

Vue の計算プロパティでアロー関数を使用する: トラブルシューティング

Vue では、計算プロパティは他のプロパティからリアクティブな値を派生するために使用されます。アロー関数は多くのシナリオでコードを簡素化できますが、計算プロパティで使用すると問題が発生する可能性があります。

元のコード (作業中):

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed: {
    switchRed: function () {
      return { red: this.turnRed };
    },
    switchGreen: function () {
      return { green: this.turnGreen };
    },
    switchBlue: function () {
      return { blue: this.turnBlue };
    }
  }
});

ログイン後にコピー

変更されたコード (動作しません):

ただし、メソッドを変更するとアロー関数を使用して計算されたプロパティでは、動作が変わります:

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

ログイン後にコピー

説明:

この問題の根本的な原因は、アロー関数がこれをバインドしないことです。 Vue インスタンス。代わりに、親スコープのコンテキストを継承します。この場合、親スコープはグローバルスコープであるため、これは予期される Vue インスタンスではなくウィンドウオブジェクトを参照します。その結果、turnRed、turnGreen、turnBlue の値は初期化されないままとなり、色が変化しません。

解決策:

この問題を解決し、計算されたプロパティでアロー関数が機能するようにするには, Vue では、bind メソッドを使用して、これを Vue インスタンスに明示的にバインドすることをお勧めします:

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

ログイン後にコピー

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