Vue.js 수명 주기 후크 및 계산된 속성에서 \'this\'가 정의되지 않은 이유는 무엇입니까?

VueJS: "this"는 수명 주기 후크 및 계산된 속성에 정의되지 않았습니다.

Vue.js에서는 "this"에 액세스하는 상황이 발생할 수 있습니다. 수명 주기 후크 또는 계산된 속성 내의 " 키워드는 "정의되지 않음"을 반환합니다. 화살표 함수를 사용할 때 발생합니다.

원인:

화살표 함수() => {} "this" 키워드를 Vue 인스턴스 외부의 컨텍스트에 바인딩합니다. 이는 화살표 함수 내의 "this"가 Vue 인스턴스 자체가 아닌 상위 범위를 참조한다는 것을 의미합니다.

예제 1:

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

이 예에서, "마운트된" 후크에 사용된 화살표 기능은 "this"를 Vue에 바인딩하지 않습니다. 인스턴스.

예 2:

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

여기서 계산된 속성은 화살표 함수를 사용합니다. 이로 인해 "this.bar"에 대한 참조가 정의되지 않음으로 평가됩니다. , "다음의 속성 'bar'를 읽을 수 없습니다."라는 오류가 발생합니다. 정의되지 않음."

해결책:

이 문제를 해결하고 "this"에 대한 올바른 참조에 액세스하려면 일반 함수나 ES5 단축어를 사용하세요.

레귤러 기능:

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

ES5 약어:

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

이러한 접근 방식을 사용하면 "this"가 수명 주기 내의 Vue 인스턴스를 참조하는지 확인할 수 있습니다. 후크 및 계산된 속성.

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