理解computed

• computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理

• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

——转自https://www.cnblogs.com/gunelark/p/8492468.html

一、计算属性

• 例如：

<div id="app">
            <div v-for="result in results">
                <p>{{result.name}}:{{result.price}}元</p>    
            </div>
            <p>总价为:{{allprice}}元</p>
            </div>
            <script type="text/javascript">
                var app=new Vue({
                    el:'#app',
                    data:{
                    results:[
                        {
                            name:'apple',
                            price:5
                        },
                        {
                            name:'banana',
                            price:10
                        },
                        {
                            name:'orange',
                            price:7
                        }
                    ]           
                    }

定义3个水果，我们想要计算所有水果的总价格。我们不能使用filters或expressions来完成这个任务。

• filters：用于简单的数据格式，在应用程序的多个位置都需要它
• expressions：不允许使用流操作或其他复杂的逻辑。他们应该保持简单
  这时候，计算属性就派上了用场，我们往computed里添加如下：

computed:{
                            allprice:function(){
                            var allprice=0;
                            var len=this.results.length;
                            for(var i=0;i<len;i++){
                                allprice+=this.results[i].price;
                            }
                            return allprice;
                    }
                    }

效果如下：

效果

二、computed与method

• 将上面computed中的allprice函数方法放入method中，{{allprice}}改为{{allprice()}}，效果都是相同的。虽然这两种方式输出的结果是相同的，但是性能将遭受毁灭性的打击。使用这种方法:allprice()方法在每次页面渲染时都会被执行一次,这也说明Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好

——部分摘自https://www.cnblogs.com/gunelark/p/8492468.html