vue computed 예제

여기서 계산된 속성 b를 선언했습니다. 우리가 제공 한 함수는 속성 vm.b에 대 한 getter 함수로 사용 됩니다.: 아마도 가장 큰 차이점은, 우리가 구성 요소의 “메서드” 섹션 대신 “계산 된” 내에서 우리의 계산 된 속성을 선언 하는. 가능한 가장 간단한 예제를 통해 여기에서 무슨 일이 일어나고 있는지 맛볼 수 있도록 해 봅시다. 이름에서 알 수 있듯이 계산된 속성은 메서드와 같지 않고 속성처럼 사용됩니다. 일반 속성과 마찬가지로 템플릿에서 계산된 속성에 데이터 바인딩할 수 있습니다. Vue는 vm.b가 vm.a에 따라 달라지므로 vm.a가 변경될 때 vm.b에 종속된 바인딩을 업데이트합니다. 그리고 가장 좋은 부분은 이 종속성 관계를 선언적으로 만들었다는 것입니다: 계산된 getter 함수는 순수하고 부작용이 없기 때문에 쉽게 테스트하고 추론할 수 있습니다. 감시자는 또한 우리가 훨씬 더 선언적 코드를 작성할 수 있습니다. 당신은 더 이상 모든 것을 직접 추적하지 않습니다. Vue는 이미 이 작업을 수행하고 있으므로 추적중인 속성, 데이터, 계산 또는 소품에 대한 변경 사항에 액세스할 수도 있습니다.

일부 기존 수정자가 있기 때문에 메서드를 호출하는 지시문을 사용하는 것도 좋습니다. 매우 유용한 예 중 하나는 .prevent로 제출 이벤트가 다음과 같이 사용되는 페이지를 다시 로드하지 못하도록 합니다. 일반 자바 스크립트 방법은 반응하지 않으므로 일반적인 예는 Date.now() 를 사용하는 것입니다: 메서드는 Vue로 작업하는 동안 많이 사용할 것입니다. 본질적으로 우리는 객체의 함수를 매달려 있는 것으로 적절히 명명됩니다. 이벤트에 대한 지시문에 기능을 연결하거나 다른 함수처럼 재사용할 작은 논리를 만드는 데 매우 유용합니다. 예를 들어 다른 메서드 내에서 메서드를 호출할 수 있습니다. 수명 주기 후크 내에서 메서드를 호출할 수도 있습니다. 그들은 매우 다재다능합니다. 이제 이 예제는 세 번째 예제와 함께 좀 더 전통적인 것으로, 일반적으로 계산된 속성이 사용되는 방식에 따라 더 많이 사용됩니다. 사용자로 가득 찬 데이터베이스가 있고 이 모든 것이 데이터() 함수에 로드되는 예를 들어 보겠습니다. 데이터 구조에는 name_first와 name_last 값이 있으며 이 두 값을 함께 연결하여 페이지에 표시할 수 있는 효율적인 방법을 찾고자 합니다.

쉽게 시각화할 수 있도록 사용자 개체의 모양을 쉽게 만들 수 있습니다: 그래서 이제 계산된 속성이 무엇이고 왜 유용한지에 대한 간략한 개요를 제공했기 때문에 이제 몇 가지 예제를 자세히 살펴보면 어떻게 되는지 더 잘 알 수 있습니다. 사용할 수 있습니다. 처음에 Vue를 사용하는 방법을 배우기 시작했을 때, 나는 그들의 사이트에있는 문서를 읽었습니다. 나는 그들이 많은 주제를 다루는 것이 좋았지만, 그들은 많은 주제를 자세히 다루지 않았다는 것을 발견했습니다. 나는 특히 그들이 준 예는 종종 정말 간단하고 아주 작은 사용이 있었다이었다 했다 그립 – 문자열을 반전하는 방법과 같은. 따라서 Vue 계산 된 속성에 대한 세 가지 실제 사용 사례를 통해 이 문제를 해결해 보겠습니다. 위의 코드는 필수적이고 반복적입니다. 계산된 속성 버전과 비교: “formatDate” 예제를 사용하면 날짜가 변경될 때마다 날짜의 서식이 한 번만 발생합니다.

カテゴリー: 未分類 パーマリンク