Vue 계산 속성의 화살표 기능이 때때로 예기치 않은 동작을 일으키는 이유는 무엇입니까?

Vue 계산 속성에서 화살표 함수 사용: 함정 이해

Vue.js에서 화살표 함수를 사용하여 구문을 단순화할 수 있습니다. 계산된 속성. 그러나 계산된 속성에 화살표 함수를 사용하면 올바르게 사용하지 않으면 예기치 않은 동작이 발생할 수 있습니다.

잘못된 함수 정의

다음 Vue 코드 조각을 고려하세요.

computed: {
  switchRed: () => {
    return { red: this.turnRed }
  },
  switchGreen: () => {
    return { green: this.turnGreen }
  },
  switchBlue: () => {
    return { blue: this.turnBlue }
  }
}

계산된 속성에서 화살표 함수를 사용할 때는 범위 지정 동작을 인식하는 것이 중요합니다. 화살표 함수는 this 키워드를 Vue 인스턴스에 바인딩하지 않습니다. 대신, 주변 컨텍스트(이 경우 Vue 구성 요소의 전역 범위)에서 this 바인딩을 상속합니다.

잘못된 정의의 결과

결과적으로 잘못된 함수 정의로 인해 계산된 속성 내의 this 키워드는 Vue 인스턴스가 아니라 전역 Vue.js 인스턴스를 참조합니다. 이로 인해 TurnRed, TurnGreen 및 TurnBlue 속성에 대해 정의되지 않은 참조 오류가 발생합니다. 결과적으로 계산된 속성은 빈 객체를 반환하고 색상 변경 동작은 예상대로 작동하지 않습니다.

올바른 함수 정의

이 문제를 해결하려면 다음이 필요합니다. this 컨텍스트를 Vue 인스턴스에 명시적으로 바인딩합니다. 이를 위해 기존 함수 구문을 사용할 수 있습니다.

computed: {
  switchRed: function() {
    return { red: this.turnRed }
  },
  switchGreen: function() {
    return { green: this.turnGreen }
  },
  switchBlue: function() {
    return { blue: this.turnBlue }
  }
}

기존 함수 구문을 사용하여 계산된 속성 내의 this 키워드가 Vue 인스턴스를 참조하는지 확인합니다. 이를 통해 계산된 속성이 의도한 대로 Vue 인스턴스의 데이터에 액세스하고 조작할 수 있습니다.

중요 사항

화살표를 사용할 때 Vue.js 문서의 지침을 준수하는 것이 중요합니다. 기능. 문서에 따르면 "인스턴스 속성이나 콜백(예: vm.$watch('a', newVal => this.myMethod()))에 화살표 함수를 사용하지 마십시오. 화살표 함수는 상위 컨텍스트에 바인딩되므로 , 이는 예상한 Vue 인스턴스가 아니며 this.myMethod는 정의되지 않습니다."

위 내용은 Vue 계산 속성의 화살표 기능이 때때로 예기치 않은 동작을 일으키는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!