vue 계산 속성과 메소드 및 리스너 간의 차이점 분석

이 글은 주로 Vue 계산 속성과 메소드 및 청취자(인터뷰 테스트 포인트)의 차이점에 대한 자세한 설명을 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

계산된 속성

템플릿 내의 표현식은 매우 편리하지만 간단한 작업을 위해 설계되었습니다. 템플릿에 논리를 너무 많이 넣으면 템플릿이 과중해지고 유지 관리가 어려워질 수 있습니다. 예:

<p id="example">
 {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</p>

여기서 템플릿은 더 이상 단순한 선언적 논리가 아닙니다. 여기에서 변수 메시지의 뒤집힌 문자열을 표시하고 싶다는 것을 깨닫기 위해 잠시 관찰해야 합니다. 여기에서 뒤집힌 문자열을 템플릿에서 여러 번 참조하려는 경우 처리하기가 더 어려워집니다.

따라서 복잡한 논리의 경우 계산된 속성을 사용해야 합니다.

기본 예

<p id="app">
 {{fullName}}
</p>
  
  
var vm = new Vue({
 el: &#39;#app&#39;,
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28
 },
 // 计算属性
 computed: {
   fullName: function () {
     console.log("计算了一次")
     return this.firstName + " " + this.lastName
   }
 }
})

결과:

Wang Xiaozhi

그런 다음 브라우저를 통해 age 속성 값을 변경하고 페이지를 다시 렌더링합니다.

보시다시피 , age를 변경했습니다. 속성 값을 계산하는 메서드가 호출되지 않았습니다. 그러면 lastName 또는 firstName과 같이 계산된 속성 값이 변경되면 인쇄된 결과는 어떻게 되나요? , 계산된 속성의 값이 변경되면 시간, 계산된 속성이 다시 계산됩니다.

계산된 속성 캐시 대 메서드

표현식에서 메서드를 호출하여 동일한 효과를 얻을 수 있다는 것을 눈치채셨을 것입니다.

<p>Reversed message: "{{ fullName() }}"</p>


// 在组件中
methods: {
 fullName: function () {
  console.log("计算了一次")
  return this.firstName + " " + this.lastName;
 }
}

결과:

Wang Xiaozhi

위의 내용도 참조하세요. , 브라우저를 통해 age 속성의 값을 변경하고 페이지를 다시 렌더링하도록 합니다.

페이지가 다시 렌더링되는 한 메서드는 한 번 실행되고 계산된 값은 다음과 같습니다. 속성은 관련 종속성이 변경되는 경우에만 실행됩니다.

캐싱이 왜 필요한가요? 거대한 배열을 순회하고 많은 계산을 수행해야 하는 계산 비용이 많이 드는 속성 A가 있다고 가정해 보겠습니다. 그러면 A에 의존하는 다른 계산된 속성이 있을 수 있습니다. 캐싱이 없으면 필연적으로 A의 getter를 여러 번 실행하게 됩니다! 캐싱을 원하지 않으면 대신 메소드를 사용하십시오.

계산된 속성과 청취 속성

청취 속성을 통해서도 동일한 효과를 얻을 수 있다는 것을 눈치채셨을 것입니다:

var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28，
  fullName
 },
 // 计算属性
 watch: {
   firstName: function () {
    console.log("计算了一次");
    this.fullNmae = this.firstName + this.lastName;
   },
   lastName: function () {
    console.log("计算了一次")
    this.fullNmae = this.firstName + this.lastName;
   }
 }
})

결과:

Wang Xiaozhi

또한 위 내용을 참조하면, 페이지를 다시 렌더링하기 위해 브라우저를 통해 age 속성 값을 변경합니다.

보시다시피 FullName과 관련되지 않은 변경 사항이 있습니다. 계산된 속성과 유사합니다. 관련 종속성에서만 캐시가 되어야 합니다. 변경되면 다시 평가하고 계산된 속성의 버전과 비교하는 것이 훨씬 낫습니다. 그렇지 않습니까?

다른 데이터가 변경될 때 변경해야 하는 일부 데이터가 있는 경우 시계를 남용하기 쉽습니다. 특히 이전에 AngularJS를 사용한 적이 있는 경우 더욱 그렇습니다. 그러나 명령형 감시 콜백 대신 계산된 속성을 사용하는 것이 더 나은 경우가 많습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! Related Related 권장 사항 : 쿠키의 분석 IView 테이블에 대한 vue ssratection render 통합 스위치 스위치 vue-scroller가 스크롤 위치를 기록하기위한 코드로 소개합니다.

위 내용은 vue 계산 속성과 메소드 및 리스너 간의 차이점 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!