Vue.js Arrow Functions에서 \"this\"가 정의되지 않은 이유는 무엇입니까?

VueJS: "this" 정의되지 않은 문제 해결

화살표 함수는 VueJS에서 함정이 될 수 있으며, 이로 인해 예기치 않은 정의되지 않은 값이 발생할 수 있습니다. 이는 화살표 함수가 Vue 인스턴스에 바인딩하는 것이 아니라 상위 컨텍스트를 상속하기 때문입니다.

Lifecycle Hooks

Mount와 같이 수명 주기 후크에서 화살표 함수를 사용할 때, 이는 Vue 인스턴스를 참조하지 않습니다. 대신 일반적으로 마운트된 후크를 트리거한 HTML 요소 또는 Vue 구성 요소인 상위 컨텍스트를 참조합니다.

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

계산된 속성

화살표 함수 계산된 속성에서도 정의되지 않은 값이 발생합니다. 상위 컨텍스트를 상속하므로 이는 Vue 인스턴스를 참조하지 않습니다.

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

이로 인해 "Uncaught TypeError: 정의되지 않은 'bar' 속성을 읽을 수 없습니다."라는 오류가 발생합니다.

해결책

이 문제를 해결하려면 대신 일반 함수나 ECMAScript 5 함수 약칭을 사용하세요. 화살표 함수:

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

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

이러한 메서드를 사용하면 이것이 항상 Vue 인스턴스를 참조하여 수명 주기 후크 및 계산된 속성에서 예상되는 동작을 제공하도록 할 수 있습니다.

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