Vue基础篇
第三章 计算属性
3.1 什么是计算属性
模板内的表达式常用于简单的运算，当其过长或者逻辑复杂时，会难以维护
计算属性可以解决该类问题。
比如:
<div>{{text.split(',').reverse().join(',')}}</div>
<body>
<div id="app">
<div>{{newtext}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
text: '123,456'
}
},
computed:{
newtext:function(){
return this.text.split(',').reverse().join(',')
}
}
})
</script>
</body>
所有的计算属性都以函数的形式写在vue实例内的computed选项内最终返回计算后的结果
3.2 计算属性的用法
在计算属性里面可以完成各种复杂的逻辑，包括运算，函数调用等
只要最终返回一个结果就可以了。
计算属性还可以依赖多个Vue实例的数据，只要其中任一数据发生改变
计算属性就会重新执行，视图也会更新。
例如计算属性常用的地方是购物车内商品的计算
<body>
<div id="app">
<ul>
<li v-for="item in package1" :key="item.name">
<span>{{item.name}}</span>
<span>{{item.count}}</span>
<span>{{item.count*item.price}}</span>
<button @click="handld(item)">-1</button>
<button @click="item.count++">+1</button>
</li>
</ul>
<span>{{prices}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
package1: [{
name: 'ipone7',
price: 7199,
count: 2,
},
{
name: 'ipad',
price: 2888,
count: 1
},
{
name: 'apple',
price: 7199,
count: 2
},
{
name: 'ipone8',
price: 7199,
count: 2
},
]
}
},
methods: {
handld(item) {
if (item.count<=0) {
item.count=0
}else{
item.count--
}
}
},
computed: {
prices: function () {
var prices = 0;
for (let i = 0; i < this.package1.length; i++) {
prices += this.package1[i].price * this.package1[i].count
}
return prices
}
},
})
</script>
</body>
当点击+-按钮是数量会发生改变，相应的价格和总价prices也会随之发生改变。
3.3计算属性缓存
<body>
<div id="app">
{{newText1()}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
text:'123,456'
}
},
methods: {
newText(){
return this.text.split(',').reverse().join(',')
}
},
})
</script>
</body>
没有使用计算属性，在methods里面定义一个方法也能够实现相同的效果
甚至该方法还可以接收参数，使用起来更灵活
但是既然使用methods能够实现，使用computed有什么用呢？
使用计算属性和methods取决于是否需要缓存，当遍历大数组和大量计算时
应该使用计算属性，除非并不希望数据缓存。
