Vue 계산 속성을 사용하는 방법

이번에는 vue 계산 속성을 사용하는 방법과 vue 계산 속성에 대한 주의사항에 대해 알려드리겠습니다.

템플릿의 계산된 속성

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

<p id="example">
 {{ message.split('').reverse().join('') }}
</p>

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

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

기본 예

<p id="app">
 {{fullName}}
</p>
var vm = new Vue({
 el: '#app',
 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과 관련되지 않은 변경 사항의 경우 fullName은 계산된 속성과 유사하게 변경되지 않습니다. , 관련 종속성이 변경된 경우에만 재평가하고 계산된 속성 버전과 비교하는 것이 훨씬 낫지 않습니까?

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS에서 DOM 요소 위치를 얻는 방법

jQuery+ajax 동적 연산 테이블 tr td 단계 자세한 설명

위 내용은 Vue 계산 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!