머리말
계산 된 속성은 값이 다른 값에 의존한다는 선언적 표현을 설명하는 데 사용됩니다. 템플릿에서 계산 된 속성에 데이터를 바인딩 할 때 VUE는 계산 된 속성이 변경되게하는 값에 따라 DOM을 업데이트합니다. 이 기능은 매우 강력하며 코드를보다 선언적이고 데이터 중심이며 유지 관리하기 쉽게 만들 수 있습니다.
템플릿의 표현식은 매우 편리하지만 실제로는 간단한 작업에만 사용됩니다.
템플릿은보기의 구조를 설명하는 것입니다. 템플릿에 너무 많은 논리를 넣으면 템플릿이 너무 무겁고 유지 관리가 어려워집니다.
이것이 바로 vue.js가 결합 표현을 하나의 표현으로 제한하는 이유입니다.
둘 이상의 표현이 필요한 경우 계산 된 특성을 사용해야합니다.
이 간단한 예를 살펴 보겠습니다
<div id = "example"> a = {{a}}, b = {{b}} </div> var vm = new Vue ({// naming vm의 이유는 이것이 실제로 mvvm el : '#example'에서 vm이기 때문입니다. 데이터 : {a : 1}, computed b : a thistect b : a thistect b. vm 인스턴스 return this.a + 1}}})출력 결과 :
a = 1, b = 2
여기서 우리는 계산 된 속성을 선언합니다. b. 우리가 제공하는 기능은 속성 vm.B의 게터로 사용됩니다.
console.log (vm.b) //-> 2vm.a = 3console.log (vm.b) //-> 3
일반 속성을 바인딩하는 것처럼 템플릿에서 계산 된 속성을 바인딩 할 수 있습니다. Vue는 vm.b가 vm.a에 의존한다는 것을 알고 있으므로 vm.a가 변경되면 vm.b에 의존하는 바인딩도 업데이트됩니다. 그리고 가장 좋은 점은 우리 가이 의존성을 선언적으로 만들었다는 것입니다. 계산 된 속성의 getters는 깨끗하고 부작용이 없으므로 테스트하고 이해하기 쉽습니다.
VUE 인스턴스에서 데이터 변경 사항을 관찰하려면 vue.js $watch 에서 제공하는 메소드를 사용할 수 있습니다.
<div id = "demo"> {{fullName}} </div> var vm = new vue ({data : {firstName : 'foo', 'firstName :'bar ', fullName :'foo bar '}}) vm. this.lastname}) vm. $ watch ( 'lastname', function (val) {this.fullname = this.firstname + '' + val}) 그러나 위의 방법은 computed 사용하여 구현할 수도 있습니다.
var vm = new vue ({data : {firstName : 'foo', lastName : 'bar'}, 계산 : {fullName : function () {return this.firstName + '' + this.lastname}}) 이런 식으로 쓰기가 더 쉽습니까? 불필요한 중복 코드가 없습니까? 공무원은 또한 computed 방법의 사용을 권장합니다.
위의 computed 에 대해 이야기했을 때이 방법은 기본 get 메소드를 제공한다고 언급되었습니다. 그래서 set 방법이 있습니까?
// ... compute : {fullName : {// getter get : function () {return this.firstName + '' + this.lastName}, // setter set : function (newValue) {var names = newValue.split ( '') this.firstname = names [0] this.lastname = length -1]}}}}}}}} vm.fullName = 'John Doe' 호출하면 setter 호출됩니다. vm.firstName 및 vm.lastName 에도 해당 업데이트가 있습니다. 이 방법은 때때로 유용합니다.
요약
위의 것은 vue.js 컴퓨팅 속성에 관한 것입니다. 이 기사가 모두에게 도움이되기를 바랍니다. 편집자는 vue.js에 대한 컨텐츠를 다시 업데이트 할 것입니다. 관심있는 친구들은 Wulin.com을 계속 팔로우 할 수 있습니다.