Vue.js에서 화살표 함수가 계산된 속성을 손상시키는 이유는 무엇입니까?

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

Vue.js에서는 계산된 속성에서 데이터와 논리를 처리하는 것이 중요합니다. 그러나 이러한 계산된 속성 내에서 화살표 함수를 활용하면 예기치 않은 동작이 발생할 수 있습니다.

원래 계산된 속성에 대한 기존 함수 선언을 사용하면 다음 코드 조각에서 볼 수 있듯이 예상대로 작동했습니다.

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

그러나 계산된 속성에서 화살표 기능으로 전환하면 값이 올바른데도 색상 변경이 작동하지 않는 문제가 발생했습니다. 업데이트되었습니다.

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

이 문제는 화살표 함수가 this 컨텍스트를 계산된 속성이 정의된 Vue 인스턴스에 바인딩하지 않기 때문에 발생합니다. 일반적으로 계산된 속성은 이를 인스턴스에 바인딩하여 인스턴스 데이터 및 메서드에 대한 액세스를 허용합니다. 그러나 화살표 함수를 사용하면 이는 일반적으로 Vue 인스턴스가 아닌 JavaScript의 전역 범위인 상위 컨텍스트를 유지합니다.

결과적으로 this.turnRed는 화살표 함수 내에서 정의되지 않게 되어 색상 변경에 실패합니다. 이 동작은 Vue.js 문서에 문서화되어 있으며 이러한 이유로 인해 인스턴스 속성이나 콜백에 화살표 함수를 사용하지 말 것을 권고합니다.

이 문제를 해결하려면 계산된 속성에 대해 기존 함수 선언을 사용하는 방식으로 돌아가십시오. 올바른 바인딩을 보장합니다.

위 내용은 Vue.js에서 화살표 함수가 계산된 속성을 손상시키는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!