이번에는 vue 계산 속성을 올바르게 사용하는 방법과 vue 계산 속성을 올바르게 사용하기 위한 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.
1. 계산된 속성이란 무엇입니까?
Expressions 템플릿의 표현은 매우 편리하지만 원래는 간단한 작업을 위해 설계되었습니다. 템플릿에 너무 많은 논리를 넣으면 템플릿이 과중해지고 유지 관리가 어려워질 수 있습니다. 예를 들면 다음과 같습니다.
<p id="example"> {{ message.split('').reverse().join('') }} </p>
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('') } } });
원래 메시지: "Hello"계산된 역전 메시지: "olleH"위 예의 간단한 사용법 외에도 계산된 속성 여러 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++ } } });
<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的数据进行计算 } } });
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 也会相应地被更新。
3. 계산된 속성 캐싱
위의 예에서는 계산된 속성을 사용하는 것 외에도 다음과 같이 표현식에서 메서드를 호출하여 동일한 효과를 얻을 수도 있습니다.<p>{{reverseTitle()}}</p> // 在组件中 methods: { reverseTitle: function () { return this.title.split('').reverse().join('') } }
를 사용하여 값을 가져오고 다른 한 명은 reverseTitle을 사용하여 값을 가져옵니다. reverseTitle()
<p>{{reverseTitle}}</p> <p>{{reverseTitle1()}}</p> <button @click="add()">补充货物1</button> <p>总价为:{{price}}</p> computed: { reverseTitle: function(){ return this.title.split('').reverse().join('') //而使用计算属性,只要title没变,页面渲染是不会重新进这里来计算的,而是使用了缓存。 }, price: function(){ return this.package1.count*this.package1.price+this.package2.count*this.package2.price } }, methods: { //对象的方法 add: function(){ this.package1.count++ }, reverseTitle1: function(){ return this.title.split('').reverse().join('') //点击补充货物,也会进这个方法,再次计算。不是刷新,而是只要页面渲染,就会进方法里重新计算。 } },
Vue 계산 속성의 사용을 살펴보겠습니다
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script src="../js/Vue.js"></script> <script src="../js/vue-resource.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:'#box', data: { a: 1, }, computed:{ b:function(){ return this.a+1; } } }); console.log(vm.a); } </script> </head> <body> <p id="box"> a => {{a}} <br> b => {{b}} </p> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script src="../js/Vue.js"></script> <script src="../js/vue-resource.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:'#box', data: { a: 1, }, computed:{ b:function(){ return this.a+1; } } }); document.onclick = function(){ vm.a = 101; } } </script> </head> <body> <p id="box"> a => {{a}} <br> b => {{b}} </p> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script src="../js/Vue.js"></script> <script src="../js/vue-resource.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:'#box', data: { a: 1, }, computed:{ b:{ get:function(){ return this.a+2; }, set:function(val){ this.a=val; } } } }); document.onclick = function(){ vm.b = 10; } } </script> </head> <body> <p id="box"> a => {{a}} <br> b => {{b}} </p> </body> </html>
vue axios 요청 시간 제한 처리에 대한 자세한 설명(코드 포함)
위 내용은 vue 계산 속성을 올바르게 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!