Vue计算属性
1、计算属性的定义
我们己经可以搭建出一个简单的 Vue 应用，在模板中双向绑定一些数据或表达式了。但是表达式如果过长，或逻辑更为复杂时，就会变得雕肿甚至难以阅读和维护，这个时候就需要使用到我们计算属性功能。
示例1：功能需求是将字符串“123,456，789”编程为“789,456,123”
<div id='app'>
{{text}}
<br>
<!-- split(',')是字符串转数组方法，join（','）是数组转字符串方法 -->
<!-- 下面这是普通方法进行字符串反转 -->
{{text.split(',').reverse().join(',')}}
<br> ----下面是用使用计算属性得到的----
<br> {{reverseText}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
text: "123,456,789"
},
computed: { //计算属性都是放在computed中
reverseText: function () {
//注意这里的text获取要加上this
return this.text.split(',').reverse().join(',')
}
}
})
</script>
效果图
2、计算属性用法
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。除了上例简单的用法，计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新
示例2：功能需求是展示两台购物车价格总数
<div id='app'>
购物车总价格：{{prices}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
package1: [
{
name: 'iphone', price: 6500, count: 3
},
{
name: 'ipad', price: 3500, count: 2
}
],
package2: [
{
name: 'iphone', price: 6000, count: 2
},
{
name: 'ipad', price: 3000, count: 1
}
]
},
computed: {
prices: function () {
var prices = 0
for (var i = 0; i < this.package1.length; i++) {
prices = prices + this.package1[i].price * this.package1[i].count
}
for (var j = 0; j < this.package2.length; j++) {
prices = prices + this.package2[j].price * this.package2[j].count
}
return prices
}
}
})
3、getter和setter方法使用
每一个计算属性都包含一个 getter 和一个 setter，我们上面的两个示例都是计算属性的默认用法 ， 只是利用了 getter来读取。在你需要时，也可以提供一个 setter函数 ， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter函数，执行一些自定义的操作。
示例三：
<div id='app'>
{{fullName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'zhang',
lastName: 'guolin'
},
computed: {
//如果直接计算属性跟一个function，默认方法是getter函数，如下注释例子
// fullName:function(){
// return this.firstName+' '+this.lastName
// }
//设置全称名字，就要调用set方法
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(',') //分割为数组
this.firstName = names[0]
this.lastName = names[1]
}
}
}
})
</script>
计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称 class 和内联样式 style。
小技巧: 计算属性还有两个很实用的小技巧容易被忽略：
一是计算属性可以依赖其他计算属性：
二是计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据
4、计算属性缓存
调用 methods 里的方法能与计算属性起到同样的作用，两者具体区别如下
1、页面中的方法： 如果是调用方法，只要页面重新渲染，方法就会重新执行，不需要渲染，则不需要重新执行
2、计算属性：不管渲染不渲染，只要计算属性依赖的数据未发生变化，就永远不变
示例4：
<div id='app'> {{text}}
<br> 计算属性的缓存： {{now}}
<br> 通过methods拿到的时间戳（方法需要加括号）：{{thisTime()}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
text: "123,456,789"
},
computed: {
now: function () {
return Date.now();
}
},
methods: {
thisTime: function () {
return Date.now();
}
}
})
</script>
enter前
enter后
结论: 没有使用计算属性，在 methods 里定义了一个方法实现了相同的效果，甚至该方法还可以接受参数，使用起来更灵活。既然使用 methods 就可以实现，那么为什么还需要计算属性呢？原因就是计算属性是基于它的依赖缓存的。 一个计算属性所依赖的数据发生变化时，它才会重新取值，所以text 只要不改变，计算属性也就不更新。
何时使用: --使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
