Vue计算属性

关于计算属性介绍：

1.所有的计算属性都以函数形式写在Vue实例内的computed选项内，最终return返回计算后的结果。

2.每个计算属性都会有一个getter和setter函数，手动修改计算属性时就会触发setter函数，getter方法用来读取计算属性；

3.计算属性可以依赖其他计算属性

4.计算属性不仅可以依赖当前Vue实例的数据，还可以一阿里其他实例的数据。

<script>
    var app=new Vue({
        el:'#app',
        data:{
            pakage1:[{
                name:'iPhone 7',
                price:7199,
                count:2
            },
            {
                name:'iPad',
                price:2888,
                count:1
            }
            ],
            pakage2:[{
                name:'apple',
                price:3,
                count:5
            },
            {
                name:'banana',
                price:2,
                count:10
            }
            ]
        },
        computed:{
            prices:function () {
                var prices=0;
                for (var i=0;i<this.pakage1.length;i++){
                    prices+=this.pakage1[i].price*this.pakage1[i].count;
                }
                for (var i=0;i<this.pakage2.length;i++){
                    prices+=this.pakage2[i].price*this.pakage2[i].count;
                }
                return prices;
            }
        }
    })
</script>

计算属性缓存：

计算属性是基他的依赖缓存的，一个计算属性所依赖的数据发生变化，他才会重新取值。

计算属性与methods方法的选择：

methods方法只要中心渲染，就会被重新调用；使用计算属性还是methods方法取决于你是否需要缓存，当遍历大数组和做大量计算是，应该使用计算属性，除非你不希望得到缓存。methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行对应的方法

computed必须返回一个值页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有。