Arrow Functions가 있는 Vue.js 구성 요소에서 \'this\'가 정의되지 않은 이유는 무엇입니까?

Vue.js 구성 요소의 "this"에 대해 예기치 않은 정의되지 않은 값

Vue.js 구성 요소를 구성할 때 수명 주기 후크 내에서 "this"에 액세스 또는 계산된 속성으로 인해 예상치 못한 "정의되지 않은" 결과가 발생할 수 있습니다. "() => {}" 구문으로 표시되는 화살표 함수는 Vue 인스턴스 컨텍스트 외부에서 "this"의 바인딩을 변경합니다.

Lifecycle Hooks

제공된 예에서:

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

화살표 함수는 "this"를 Vue 인스턴스 외부 범위에 바인딩하여 "정의되지 않은" 평가.

계산된 속성

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

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

화살표 함수는 "this에 대해 다른 바인딩을 생성합니다. ," 결과적으로 "정의되지 않은 'bar' 속성을 읽을 수 없습니다." error.

해결책

이 문제를 해결하고 "this"를 Vue 인스턴스로 올바르게 참조하려면 다음 기술을 사용하는 것이 좋습니다.

1. 정규 함수: 표시된 대로 일반 함수 구문을 사용합니다. by:

mounted: function () {
  console.log(this);
}

2. ECMAScript 5 단축어: 또는 ECMAScript 5 함수 단축어를 사용할 수 있습니다:

mounted() {
  console.log(this);
}

이러한 방법을 사용하면 Vue.js 구성 요소 내에서 "this"의 적절한 바인딩을 설정하여 다음에 대한 접근성을 보장할 수 있습니다. 예상대로 구성 요소의 속성과 메서드를 사용합니다.

위 내용은 Arrow Functions가 있는 Vue.js 구성 요소에서 \'this\'가 정의되지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!