vue 계산 속성 및 청취자 실제 프로젝트에 대한 자세한 설명-JS 튜토리얼-php.cn

vue 계산 속성 및 청취자 실제 프로젝트에 대한 자세한 설명

php中世界最好的语言

풀어 주다： 2018-06-06 14:33:37

원래의

2410명이 탐색했습니다.

이번에는 Vue 계산 속성과 리스너 실습 프로젝트에 대해 자세히 설명하겠습니다. Vue 계산 속성과 리스너 실습 프로젝트에 대한 주의 사항은 무엇입니까?

계산된 속성

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

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

로그인 후 복사

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

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

기본 예

<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;
   }
 }
})

로그인 후 복사

결과: