화살표 함수가 Vue 계산 속성을 손상시키는 이유는 무엇이며 어떻게 해결할 수 있습니까?

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에서는 이를 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!