vue 计算属性和data_vue之计算属性和监听属性

一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解，本文主要介绍两者的用法、使用场景及其两者的区别。

一．Vue计算属性——快速入门

1、什么是计算属性

我们知道，Vue.js提供了完全的 JavaScript 表达式支持，所以可以在模版的 {{ }} 花括号或者属性绑定内书写JavaScript 语句。那么问题来了，在模板中放入太多的逻辑会让模板过重且难以维护，所以就有了计算属性，目的是为了在模板中绑定表达式是非常便利的。

例如说某宝上有一件衣服100块，老板需要计算利润。

new Vue({

el: '#app',

data:{

clothes:{id:1,price:100,name:'衣服',count:1},

//衣服信息

}

})

上线价：{{ clothes.price }}

利润：【这里需要填写利润】

利润需要减去成本和运费：

new Vue({

el: '#app',

data:{

clothes:{id:1,price:100,name:'衣服',count:1},

cost:30,//成本

freight:5,//运费

}

})

这时候，利润：

利润：{{clothes.price * clothes.count-clothes.count*cost-clothes.count*freight}}

随着费用的增加，计算利润的表达式会越来越长，这时候视图层(view)的逻辑越来越复杂，代码会越来越臃肿，变得难以维护。

2、计算属性的具体用法

Vue.js计算属性中可以运用各种逻辑运算，函数调用等，最终会返回一个结果，就是计算属性后得到的结果，这个过程简化了在vue.js模版中使用过多的JavaScript 语句计算过程。在vue.js里面，所有的计算属性都写在 vue 实例的 computed 属性中，这个计算属性就是一个函数，返回值为最后属性的值。

同是上面的例子：

上线价：{{ clothes.price }}

利润：{{profit}}