VUE——计算属性-computed

前言：模板内的表达式常用于简单的运算，当其过长或逻辑复杂时，会变得臃肿甚至难以阅读难以维护。计算属性就用于解决该问题

 

上代码：

<div>{{text.split(',').reverse().join(',')}}</div>//包含三个操作

计算属性进行改写

    <div id="app">
        <div>{{reversedText}}</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                text:'1,2,3,4,5'
            },
            computed:{
                reversedText:function(){
                    return this.text.split(',').reverse().join(',')
                }
            }
        })
    </script>

总结：所有的计算属性都一函数的形式写在vue实例内的computed内，最终返回计算后的结果。

计算属性的用法

在一个计算属性里，可以完成复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

除了上述简单用法，计算属性还可以依赖多个vue实例数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。例如下面实例展示的是购物车内包裹的物品总结：

    <div id="app">
        <div>总价：{{totalPrices}}元</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                package1:[
                    {
                        name:'iphone7',
                        price:7199,
                        count:2
                    },
                    {
                        name:'ipad',
                        price:2999,
                        count:1
                    }
                ],
                package2:[
                    {
                        name:'香蕉',
                        price:4,
                        count:5
                    },
                    {
                        name:'香梨',
                        price:6,
                        count:3
                    },
                    {
                        name:'葡萄',
                        price:18,
                        count:5
                    }
                ]
            },
            computed:{
                totalPrices:function(){
                    let prices=0;
                    for(let i=0;i<this.package1.length;i++){
                        prices +=this.package1[i].price*this.package1[i].count;
                    }
                    for(let i=0;i<this.package2.length;i++){
                        prices +=this.package2[i].price*this.package2[i].count;
                    }
                    return prices;
                }
            }
        })
    </script>

　　当package1和package2中的商品有任何变化，计算属性totalPrices都会重新计算，返回新的结果，视图自动更新。

计算属性缓存

计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值计算，所以只要data里的值不变，计算属性也不会更新。