Vue.js 구성 요소 및 화살표 함수를 사용하여 계산된 속성에서 \'this\'가 정의되지 않은 이유는 무엇입니까?

Vue.js 구성 요소 및 계산 속성에서 "this"에 대한 참조가 정의되지 않은 이유는 무엇입니까?

Vue.js에서 구성 요소 및 계산 속성 정의 계산된 속성을 활용하는 것은 'this' 키워드를 사용하는 작업을 포함합니다. 그러나 개발자는 특정 시나리오에서 'this'가 '정의되지 않음'으로 평가되는 문제에 자주 직면합니다. 이 문서에서는 이러한 현상이 발생하는 이유를 명확히 하고 해결 방법을 제공하는 것을 목표로 합니다.

수명 주기 후크(예: 마운트 및 업데이트) 또는 계산된 속성에서 화살표 함수(예: () => {})를 사용할 때 'this'는 의도한 Vue 인스턴스와 다를 수 있습니다. Vue.js 문서에서는 이러한 상황에서 화살표 기능을 사용하지 말 것을 명시적으로 권고합니다. 대신 개발자는 'this'가 Vue 인스턴스를 적절하게 참조하는지 확인하기 위해 일반 함수나 ECMAScript 5 단축 구문을 사용해야 합니다.

구성 요소의 예를 고려하세요.

mounted: () => {
  console.log(this); // returns "undefined"
},

이 경우, 화살표 함수 () => {}는 'this'를 Vue 구성 요소 외부의 다른 컨텍스트에 바인딩합니다. 결과적으로, 함수 외부에서 'this'를 사용하여 속성이나 메서드에 액세스하는 것은 실패합니다.

마찬가지로 계산된 속성에서:

computed: {
  foo: () => { 
    return this.bar + 1; 
  } 
}

화살표 함수를 사용하여 계산된 속성의 값 평가() = > {}는 또한 'this'가 정의되지 않게 만듭니다. 이로 인해 "정의되지 않은 'bar' 속성을 읽을 수 없습니다."라는 오류가 발생합니다.

이 문제를 해결하려면 일반 JavaScript 함수 또는 ECMAScript 5 약어를 사용할 수 있습니다.

mounted: function () {
  console.log(this); // correctly logs the Vue instance
}

mounted() {
  console.log(this); // also correctly logs the Vue instance
}

이 예제는 일반 함수 또는 ECMAScript 5 약어가 'this'를 Vue 구성 요소 인스턴스에 적절하게 바인딩하여 'this'가 다음과 같이 평가되는 문제를 해결하는 방법을 보여줍니다. '정의되지 않음.'

위 내용은 Vue.js 구성 요소 및 화살표 함수를 사용하여 계산된 속성에서 \'this\'가 정의되지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!