Vue.js实战 学习笔记 三（计算属性）

在Vue中，可以直接在模板中（视HTML为一个模板，然后往里填放数据）双向绑定数据或表达式时，表达式可能会很长，或逻辑复杂，难以维护管理

此时需要使用　计算属性：以函数的形式，写入Vue实例中的computed选项中，最终返回的为计算后的结果。

在计算属性中，可以实现各种逻辑，包括运算、函数调用等，同时可依赖多个Vue实例的数据，只要其中一个变化就会执行计算属性，更新视图：

<div id="app">
    <p>prices：{{prices}}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            package1: [{
                name: 'iphone5'
                price: '3000'
                count: '2'
            } {
                name: 'iphone6'
                price: '4000'
                count: '3'
            }]
            package2: [{
                name: 'ipad'
                price: '3000'
                count: '2'
            } {
                name: 'ipad pro'
                price: '4000'
                count: '3'
            }]

            computed: {
                prices: function () {
                    var prices = 0;
                    for (var i = 0; i < this.package1.length; i++) {
                        prices += this.package1[i].price * this.package1.price[i].count
                    }
                    for (var i = 0; i < this.package2.length; i++) {
                        prices += this.package2[i].price * this.package2.price[i].count
                    }
                    return prices;
                }
            }
        }
    })
</script>

每个计算属性包括一个getter(读取）和一个setter(修改时会触发），通常情况下会使用默认用法，故不进行细致了解

计算属性computed依赖其他实例数据：

<div id="app1"></div>
<div>
     {{text}}
</div>

<script>
    var app1 = new Vue({
        el: '#app1',
        data: {
            text: '123,456'
        }
    });
    var app2 = new Vue({
        el: '#app2',
        computed: {
            text: function(){
                //依赖app1中的数据
                return app1.text
            }
        }
    })
</script>

注：

在某些时候，使用methods中定义一个方法，可以达到和computed相同的效果

使用计算属性依赖于缓存，只有当计算属性依赖的数据变化的时候，才会进行重新取值，即，data不变，computed不更新

而methods中定义的属性和方法，并不依赖于数据，可自行写出方法与函数，只要重新渲染即被调用

//data没有发生改变，computed不会进行函数的调用
computed: {
    now: function(){
        return Date.now()
    }
}

//重新渲染，methods即会发生调用
methods: {
    now: function(){
        return Date.now()
    }
}