Vue基础第三章 - 计算属性
1、计算属性介绍
在第二章中我们介绍了在Vue的{{}}中可以使用一些简单的表达式进行计算，但是当表达式过长或者逻辑过于复杂就会变得不易理解和维护，比如第二章的示例{{ text.split(',').reverse().join(',') }}，为了使{{}}的内容看起来更简洁，就需要用到Vue中计算属性，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 示例</title> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> {{ reversedText }} </div> <script> var app=new Vue({ el:"#app", data:{ text:'123,456' },
<!--计算属性在Vue的computed属性中以函数的形式定义--> computed:{ reversedText:function() { return this.text.split(',').reverse().join(','); } } }) </script> </body> </html>
2、计算属性用法
2.1、计算属性的常用用法
计算属性通常被用于完成各种复杂逻辑，包括运算和函数调用等，计算属性可以依赖多个Vue实例数据，任意一个数据变化都会使计算属性重新执行，页面也会随之更新，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 示例</title> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> 总价：{{ prices }} </div> <script> var app=new Vue({ el:"#app", data:{ package1:[ { name:'iPhone7', price:7199, count:2 }, { name:'iPad', price:2888, count:1 } ], package2:[ { name:'apple', price:3, count:5 }, { name:'banana', price:2, count:10 } ] }, computed:{
<!--当package1和package2中的商品数量和种类出现变化时，计算属性都会重新执行。这是只是默认使用了计算属性的getter方法--> prices:function() { var prices = 0; for (var i = 0;i<this.packages1.length;i++){ prices+=this.package1[i].price*this.package1[i].count; } for (var i = 0;i<this.packages1.length;i++){ prices+=this.package2[i].price*this.package2[i].count; } return prices; } } }) </script> </body> </html>
2.2、计算属性的getter方法和setter方法
每个计算属性都有getter和setter两种方法，分别是读取计算属性数据和修改计算属性数据的，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 示例</title> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> 姓名：{{ fullName }} </div> <script> var app=new Vue({ el:"#app", data:{ firstname:'Jack', lastname:'Green' }, computed:{ fullName:{
<!--getter方法用于返回数据，最常用的方法--> get:function() { return this.firstname + ' ' + this.lastname; },
<!--setter方法用于修改计算属性依赖的数据，这个方法一般用不到--> set:function() { var names = newValue.split(' '); this.firstname = names[0]; this.lastname = names[names.length - 1]; } } } }); </script> </body> </html>
2.3、计算属性小技巧
2.3.1、计算属性可以依赖其他计算属性
在Vue实例的计算属性中我们可以调用其他Vue实例中计算属性的返回值参与计算，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <title>Vue 示例</title> </head> <body> <div id="app1"> 电子产品总价：{{ price1 }} </div> <div id="app2"> 商品总价：{{ price }} </div> <script> var app1=new Vue({ el:'#app1', data:{ package1:[ { name:'iPhone', price:7199, count:2 }, { name:'iPad', price:2888, count:1 } ] }, computed:{ price1:function() { var price1=0; for (var i=0;i<this.package1.length;i++) { price1+=this.package1[i].price * this.package1[i].count; } return price1; } } }); var app2=new Vue({ el:"#app2", data:{ package2:[ { name:'apple', price:10, count:1 }, { name:'banana', price:3, count:3 } ] }, computed:{ price:function() { var price=0; for (var i=0;i<this.package2.length;i++) { price+=this.package2[i].price * this.package2[i].count; }
<!--此处调用了名为app1的Vue实例中的计算属性price1参与计算，最终返回的price就是所有商品的总价--> price+=app1.price1; return price; } } }) </script> </body> </html>
2.3.2 计算属性可以依赖其他Vue实例的数据
就像在计算属性中可以调用其他Vue实例的计算属性返回值一样，同样的我们也可以调用其他Vue实例中的数据参与计算，如下示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <title>Vue 示例</title> </head> <body> <div id="app1"> </div> <div id="app2"> 商品总价：{{ price }} </div> <script> var app1=new Vue({ el:'#app1', data:{ package1:[ { name:'iPhone', price:7199, count:2 }, { name:'iPad', price:2888, count:1 } ] } }); var app2=new Vue({ el:"#app2", data:{ package2:[ { name:'apple', price:10, count:1 }, { name:'banana', price:3, count:3 } ] }, computed:{ price:function() { var price=0; for (var i=0;i<this.package2.length;i++) { price+=this.package2[i].price * this.package2[i].count; } for (var i=0;i<app1.package1.length;i++) { price+=app1.package1[i].price * app1.package1[i].count; return price; } } }) </script> </body> </html>
3、计算属性缓存
在第二章中我们介绍过一个跟计算属性功能类似的属性methods，在methods属性中同样可以定义函数实现一样的功能，那么为什么还会有计算属性这个看似多余的属性呢，当然是因为这两者之间是有区别的，区别就在于methods属性不会缓存计算结果，每一次页面渲染都会重新调用methods属性中的函数进行计算，而计算属性则会讲计算结果缓存起来，只要它依赖的数据没有变化，无论页面渲染多少次都不会重新调用函数进行计算，因此methods适合用于逻辑简单，数据量小的场景，而当计算逻辑较为复杂，数据量很大时则需要使用计算属性讲结果缓存，提升用户体验。
