在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()
}
}