vue 계산 속성에 대한 자세한 설명
- php中世界最好的语言원래의
- 2018-04-11 13:50:231848검색
이번에는 vue 계산 속성에 대해 자세히 설명하겠습니다. vue 계산 속성을 사용할 때 주의사항은 무엇인가요?
1. 계산된 속성이란 무엇입니까
템플릿 내의 Expressions은 매우 편리하지만 간단한 작업을 위해 설계되었습니다. 템플릿에 너무 많은 논리를 넣으면 템플릿이 과중해지고 유지 관리가 어려워질 수 있습니다. 예:
<p id="example">
{{ message.split('').reverse().join('') }}
</p>
여기 표현식에는 3가지 연산이 포함되어 있는데 이는 명확하지 않습니다. 따라서 복잡한 논리를 만나면 이를 처리하기 위해 계산된 Vue의 특수 계산 속성을 사용해야 합니다.
2. 계산된 속성의 사용
최종적으로 결과가 반환되기만 하면 연산, 함수 호출 등 다양한 복잡한 로직을 계산된 속성에서 완성할 수 있습니다.
계산된 속성을 사용하여 위의 예를 다시 작성해 보겠습니다
<p id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p> //我们把复杂处理放在了计算属性里面了
</p>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});
결과:
원본 메시지: "안녕하세요"
계산된 역방향 메시지: "olleH"
위 예의 간단한 사용법 외에도 계산된 속성은 여러 Vue 인스턴스의 데이터에 의존할 수도 있습니다. 데이터가 변경되면 계산된 속성이 다시 실행되고 뷰가 업데이트됩니다.
rreee쉽게 간과되는 계산된 속성에 대한 두 가지 매우 실용적인 팁이 있습니다. 첫째, 계산된 속성은 다른 계산된 속성에 따라 달라질 수 있습니다. 둘째, 계산된 속성은 현재 Vue 인스턴스의 데이터에 의존할 수 있을 뿐만 아니라 다른 계산된 속성의 데이터에도 의존할 수 있습니다. 예:
<body>
<p id="app">
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p>
</p>
</body>
var app = new Vue({
el: '#app',
data: {
package1: {
count: 5,
price: 5
},
package2: {
count: 10,
price: 10
}
},
computed: {
price: function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price //总价随着货物或价格的改变会重新计算
}
},
methods: { //对象的方法
add: function(){
this.package1.count++
}
}
}); 각 계산된 속성에는 getter와 setter가 포함되어 있습니다. 위의 두 가지 예는 읽기 위해 getter만 사용하는 계산된 속성의 기본 사용법입니다.
필요한 경우 일반 데이터를 수정하는 것처럼 계산된 속성의 값을 수동으로 수정하면 setter 함수가 트리거되어 다음과 같은 일부 사용자 지정 작업을 수행할 수도 있습니다. 대부분의 경우 계산된 속성을 읽으려면 기본 getter 메서드만 사용합니다. Setter는 비즈니스에서 거의 사용되지 않으므로 계산된 속성을 선언할 때 모든 선언된 getter와 setter를 결합할 필요 없이 기본 쓰기 메서드를 직접 사용할 수 있습니다. .
3. 계산된 속성 캐시 위의 예에서는 계산된 속성을 사용하는 것 외에도 다음과 같이 표현식에서 메서드를 호출하여 동일한 효과를 얻을 수도 있습니다. 계산된 속성 대신 메서드로 동일한 함수를 정의할 수 있으며 최종 결과는 실제로 어느 쪽이든 정확히 동일할 것입니다. 한 명은
를 사용하여 값을 가져오고 다른 한 명은 reverseTitle을 사용하여 값을 가져옵니다. 그러나 차이점은 계산된 속성이 종속성에 따라 캐시된다는 것입니다. 계산된 속성은 관련 종속성이 변경될 때만 재평가됩니다.reverseTitle()
즉, 제목이 변경되지 않는 한 reverseTitle 계산 속성에 여러 번 액세스하면 함수를 다시 실행할 필요 없이 이전 계산 결과가 즉시 반환됩니다.
간단한 예:
<p id="app1"></p>
<p id="app2">{{ reverseText}}</p>
var app1 = new Vue({
el: '#app1',
data: {
text: 'computed'
}
});
var app2 = new Vue({
el: '#app2',
computed: {
reverseText: function(){
return app1.text.split('').reverse().join(''); //使用app1的数据进行计算
}
}
});
대조적으로, 호출 메소드는 리렌더링이 트리거될 때마다 항상 함수를 다시 실행합니다.
캐싱이 필요한 이유는 무엇입니까? 거대한 배열을 순회하고 많은 계산을 수행해야 하는 계산 비용이 많이 드는 속성 A가 있다고 가정해 보겠습니다. 그러면 A 에 의존하는 다른 계산된 속성이 있을 수 있습니다.
캐싱이 없으면 필연적으로 A의 getter를 여러 번 실행하게 됩니다! 캐싱을 원하지 않으면 대신 메소드를 사용하십시오.
Vue 계산 속성의 사용법을 살펴보겠습니다
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
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];
}
}
}
});
//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요. ! 추천 도서:
webpack의 모바일 측 자동화 빌드 렘 방법에 대한 자세한 설명
위 내용은 vue 계산 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!