vue 계산 속성 및 메서드 리스너를 사용하는 방법-JS 튜토리얼-php.cn

vue 계산 속성 및 메서드 리스너를 사용하는 방법

php中世界最好的语言

풀어 주다： 2018-06-02 11:30:44

원래의

1847명이 탐색했습니다.

이번에는 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;
   }
 }
})

로그인 후 복사

결과: