Vue.js 튜토리얼의 계산된 속성

Vue.js의 인라인 표현식은 매우 편리하지만 가장 적합한 사용 시나리오는 간단한 부울 연산 또는 문자열 연결입니다. 더 복잡한 논리가 포함된 경우 계산된 속성을 사용해야 합니다.

계산된 속성은 값이 다른 값에 종속된다는 것을 선언적으로 설명하는 데 사용됩니다. 템플릿의 계산된 속성에 데이터를 바인딩하면 Vue는 종속 값으로 인해 계산된 속성이 변경될 때 DOM을 업데이트합니다. 이 기능은 매우 강력하며 코드를 더욱 선언적이고 데이터 중심적이며 유지 관리하기 쉽게 만들 수 있습니다.

일반적으로 절차적 $watch 콜백을 사용하는 것보다 계산된 속성을 사용하는 것이 더 적합합니다. 예를 들어, 다음 예는 다음과 같습니다.

<div id="demo">{{fullName}}</div>
var vm = new Vue({
data: {
firstName: &#39;Foo&#39;,
lastName: &#39;Bar&#39;,
fullName: &#39;Foo Bar&#39;
}
})
vm.$watch(&#39;firstName&#39;, function (val) {
this.fullName = val + &#39; &#39; + this.lastName
})
vm.$watch(&#39;lastName&#39;, function (val) {
this.fullName = this.firstName + &#39; &#39; + val
})

위 코드는 절차적이며 상대적으로 번거롭습니다. 계산된 속성 버전 비교:

var vm = new Vue({
el:'#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})

기분 좀 나아졌나요? 또한 계산된 속성에 대한 설정자를 제공할 수도 있습니다.

computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

계산된 속성 캐시

0.12.8 이전에는 계산됨 속성 이는 값을 얻는 행위일 뿐입니다. getter는 액세스할 때마다 다시 평가합니다. 이는 0.12.8에서 개선되었습니다. 계산된 속성의 값은 캐시되며 반응 종속성 중 하나가 변경되는 경우에만 다시 계산됩니다.

대규모 배열을 반복하고 많은 작업을 수행해야 하는 값비싼 계산 속성 A가 있다고 상상해 보세요. 그리고 A에 의존하는 계산된 속성도 있습니다. 캐싱이 없으면 A의 getter를 불필요하게 과도하게 호출하여 잠재적인 성능 문제를 일으킬 수 있습니다. 캐싱을 사용하면 종속성이 변경되지 않는 한 A의 값이 캐시되므로 여러 번 액세스해도 불필요한 작업이 많이 발생하지 않습니다.

그러나 "반응적 종속성"으로 간주되는 것이 무엇인지 이해해야 합니다.

var vm = new Vue({
data: {
msg: 'hi'
},
computed: {
example: {
return Date.now() + this.msg
}
}
})

위 예에서 계산된 속성 vm.msg에 의존합니다. 이는 Vue 인스턴스에서 관찰되는 데이터 속성이므로 반응적 종속성으로 간주됩니다. vm.msg가 변경될 때마다 vm.example의 값이 다시 계산됩니다.
그러나 Date.now()는 Vue의 데이터 관찰 시스템과 아무 관련이 없기 때문에 반응적 종속성이 아닙니다. 따라서 프로그램에서 vm.example에 액세스하면 vm.msg가 재계산을 트리거하지 않는 한 타임스탬프가 항상 동일한 값이라는 것을 알 수 있습니다.

때때로 단순 데이터 수집 모드를 유지해야 하고 vm.example에 액세스할 때마다 재계산을 트리거하고 싶을 때가 있습니다. 0.12.11부터 특별한 계산 속성에 대해 캐시 지원을 켜거나 끌 수 있습니다.

computed: {
example: {
cache: false,
get: function () {
return Date.now() + this.msg
}
}
}

이제 vm.example에 액세스할 때마다 , 타임스탬프는 시간에 맞춰 업데이트됩니다. 그러나 이는 JavaScript 프로그램 내에서 액세스할 때만 발생하며 데이터 바인딩은 여전히 ​​드라이버에 따라 다릅니다. 템플릿에서 {{example}} 계산된 속성을 바인딩하면 DOM은 반응적 종속성이 변경될 때만 업데이트됩니다.