计算属性computed

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

<div id="app">
    <div>{{message.split('').reverse().join('')}}</div>

    <div>原数值：{{message}}</div>
    <div>计算后得数：{{newCount}}</div>
</div>
<script>
    var c=new Vue({
        el:"#app",
        data:{
            message:"Hello",
        },
        computed:{
            newCount:function(){
                this.message.split('').reverse().join('')
            }
        }
})
</script>

• 计算属性可以依赖多个Vue实例的数据，只要改变一个数据项，计算属性就会从新计算.

<div id="app">
    <div>
        <input type="text" v-model="package1.count">*20+2*200=
    </div>
    <div>
        <p>总价是：{{calculated}}</p>
    </div>
</div>

<script>
     var t=new Vue({
        el:"#app",
        data:{
            message:"Hello",
            package1:  {
                 count:1,
                 price:200,
            },  
             package2:{
                 count:2,
                 price:100,
             }           
         },
         computed:{
                 calculated:function(){
                    return this.package1.count*this.package1.price+this.package2.count*this.package2.price
                 }
         }
      })
</script>

• 计算属性可以依赖其他计算属性，也可以调用其他实例的数据。

<div id="app">
    <div>商品总价：{{calculated}}</div>
</div>
<div id="app2"></div>

<scirpt>
    var root2=new Vue({
        el:"#app2",
        data:{
            count:1,
            price:200,
        }
        computed:{
            cal:function(){
                return this.price*2
            }
        }
    })
     var root=new Vue({
        el:"#app",
        computed:{
            calculated:function(){
                return root.count*root2.price+root2.cal
            }
        }
    })
</script>

上例中，calculated从root实例，调用root2实例的数据和其他计算属性。

计算属性与方法的区别

计算属性是基于它们的依赖进行缓存的。只有依赖值改变时，计算属性才重新求值。依赖不变时，多次访问计算属性，会直接返回之前的计算结果，不必再次执行函数。
而每次访问调用方法时，它都会再次执行函数。即使当前页面已经调用过一次了，新调用时还会重新计算。