Vue——计算属性
1.什么是计算属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="myapp"> {{ text.split(',').reverse().join('??') }} </div> <!--如果表达式很长或者逻辑过于复杂，就会变得臃肿不堪，所以可以定义一个计算属性--> <div id="app"> {{ reverseText }} </div> <script> var myapp = new Vue({ el: "#myapp", data: { text: '123,456,789' } }); var app = new Vue({ el: "#app", data: { text:'123,456,789' }, computed: { reverseText: function () { return this.text.split(',').reverse().join('||') } } }) </script> </body> </html>
2.计算属性的简单用法
在一个计算属性里面可以完成各种复杂的逻辑，包括运算、函数调用等只要最终返回一个结果就可以了。
除此之外，计算属性还可以依赖多个Vue实例的数据，只要其中一个数据变化，计算属性就会重新执行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> 总价：{{ prices }} </div> <script> var app = new Vue({ el: "#app", data: { package1: [ { name: 'iphone7', price: 6999, count: 2 }, { name: 'ipad', price: 2999, count: 2 } ], package2: [ { name: 'apple', price: 3, count: 5 }, { name: 'banana', price: 2, count: 10 } ] }, computed:{ prices:function () { var prices = 0; for (var i = 0; i < this.package1.length; i++){ prices += this.package1[i].price * this.package1[i].count; } for (var j = 0; j < this.package2.length; j++) { prices += this.package2[j].price * this.package2[j].count; } return prices } } }) </script> </body> </html>
效果：
每一个计算属性都包含一个getter和一个setter，默认只利用getter。
当我们要手动修改计算属性的时候，就可以定义一个setter，这样在修改计算属性的时候就会自动触发setter。
绝大多数情况下只会用到getter，所以不需要将二者都进行声明。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> 姓名：{{ fullName }} </div> <script> var app = new Vue({ el: "#app", data: { firstName: 'Kobe', lastName: 'Bryant' }, computed: { fullName: { // 当我们输入app.fullName = 'LeBron James'，就会调用setter get: function () { return this.firstName + " " + this.lastName }, set: function (newValue) { var names = newValue.split(' '); this.firstName = names[0]; //firstname发生改变，计算属性也会发生相应的改变 this.lastName = names[names.length -1]; } } }, }) </script> </body> </html>
此外，计算属性还可以依赖其它计算属性，而且可以依赖其它Vue实例的数据。
3.计算属性缓存
我们发现使用methods也可以实现相同的效果，二者到底有什么不同？
计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化时，他才会重新取值，所以只要text不改变，计算属性就不会发生改变.
使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和需要进行大量计算时应当使用计算属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app01">{{ reverseText() }}</div> <div id="app02">{{ reverseText }}</div> <script> var app01 = new Vue({ el: "#app01", data: { text: '1,2,3,4,5,6' }, methods: { reverseText: function () { return this.text.split(',').reverse().join('|') } } }); var app02 = new Vue({ el: "#app02", data: { text: '1,2,3,4,5,6' }, computed: { reverseText: function () { return this.text.split(',').reverse().join('|') } } }) </script> </body> </html>
4.计算属性、方法和监听器
<div id="app"> {{ fullName }} </div> <script> var app = new Vue({ el: "#app", data: { firstName: "rongkai", lastName: "zhang", fullName: "rongkai zhang" }, // computed: { // fullName: function () { // console.log("计算了一次"); //只要依赖的变量没有发生任何改变的时候，就会一直使用缓存，而不需要重新计算 // return this.firstName + " " + this.lastName // } // }, // methods: { // fullName: function () { // console.log("计算了一次"); //页面只要被渲染方法就会被执行一次 // return this.firstName + " " + this.lastName // } // }, watch: { //监听器也是需要依赖缓存的 firstName: function () { //如果firstname发生改变就会执行下面的代码 console.log("计算了一次"); this.fullName = this.firstName + " " + this.lastName }, lastName: function () { console.log("计算了一次"); this.fullName = this.firstName + " " + this.lastName } } }) </script>
