화살표 기능을 사용할 때 Vue 계산 속성이 업데이트되지 않는 이유는 무엇입니까?

Vue 계산 속성에서 화살표 함수 사용

Vue에서는 화살표 함수를 사용하여 계산 속성을 정의할 수 있습니다. 그러나 사용자는 화살표 함수를 사용할 때 계산된 요소의 색상이 변경되지 않는 문제가 발생할 수 있습니다.

원본 코드와 수정 코드 비교

원본 코드 전통적인 함수 구문을 사용하여 계산된 속성을 정의합니다.

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 };
  }
}

근본 원인

문제는 화살표 기능 사용에 있습니다. 화살표 함수는 부모로부터 this 컨텍스트를 상속받는 반면, 기존 함수 구문은 이를 Vue 인스턴스에 바인딩합니다. 계산된 속성에서 화살표 함수를 사용할 때 이는 Vue 인스턴스에 바인딩되지 않아 계산된 요소의 색상을 업데이트하지 못하게 됩니다.

해결책

문제를 해결하려면 계산된 속성에 기존 함수 구문을 사용하는 것이 좋습니다. 또는 메서드에 화살표 함수를 사용할 수 있지만 바인딩 또는 적용 메서드를 사용하여 이를 Vue 인스턴스에 명시적으로 바인딩하는 것이 중요합니다.

위 내용은 화살표 기능을 사용할 때 Vue 계산 속성이 업데이트되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!