转载于：https://blog.csdn.net/qq_25015861/article/details/123610969 作者：冰咖啡iii
本文只做学习参考;
computed计算属性
1、什么是计算属性
计算属性 本质是方法，只是在使用这些 计算属性 的时候，把他们的名称直接当作 属性 来使用，并不会把 计算属性 当作方法去调用，不需要加小括号 ()调用。
2、为什么要用计算属性
当你需要一个属性是需要经过一些计算的，比如你要一个discounted折扣后的钱属性，现在有price价格，和discount折扣。那么discounted=price*discount。discounted与现有的属性price和discount相关联。
要得出discounted的值，我们可以这样写。
<div>{{price*discount}}</div>
我们不是要 discounted属性吗，这样写貌似不需要添加一个属性，直接用表达计算出折扣后的值就行了。
那么，如果非要得到个discounted呢，我们可能会想到用methods写个方法进行计算
<！--template-->
<div class="price">
原价：<span v-text="price"></span><br>
现价： <span v-text="discounted()"></span>
</div>
<！--script-->
data() {
return {
price:100,
discount:0.8
}
}，
methods: {
discounted(){
this.price*discount
}
},
再看看vue的comunidad计算属性
<！--template-->
<div class="price">
原价：<span v-text="price"></span><br>
现价： <span v-text="discounted"></span>
</div>
<！--script-->
computed: {
discounted(){
return this.price*this.discount
}
},
我们又会想，用表达式price*discount不就可以得出discounted吗，为什么还要费那么大功夫写什么方法，computed。
那么问题就来了，如果我们的discounted是根据你买的金额，按一下规则来：
| 原价x | 折扣 |
|---|---|
| 0<x<=50 | 0.9 |
| 50<x<=100 | 0.85 |
| 100<x | 0.8 |
那么我们该如何实现呢？我们先试着直接用表达式看看。
这里报错了，显然不支持多行表达式。如果需要经过一些稍微复杂的计算，我们就必须使用函数了。
但是，还是建议即使是简单的表达式，还是建议写成computed或者computed里
因为我们写程序要有关注分离的思想，比如css就写在< style >里，js就写在< script >里，这样更方便我们阅读，也使代码更加规范。那么，又有问题来了，这里我们的确得出了想要的值，但我们发现用methods不就行了吗，为啥还要computed呢，这两者有什么区别?
1、methods使用时，一般情况需要加括号，而computed则不需要。
2、methods每次调用时会重新执行函数，而computed在其内部变量不变或其返回值不变的情况下多次调用只会执行一次，后续执行时直接从缓存中获取该computed的结果。
至于为什么computed为什么不像methods一样使用小括号调用，是由于computed本身就是一个属性，其本质是computed内部有两个方法（set和get），computed最终的得到的结果是get方法的返回值，而set方法很少使用到，因此简化写法就是上述正常使用computed的格式。
3、compute、methods和watch三者的区别
| computed | methods | watch | |
|---|---|---|---|
| 缓存 | 有 | 没有 | 没有 |
| 异步 | 不行 | 不行 | 行 |
| 触发 | 模板使用：数据 | 模板使用：方法 | 被监控数据发送变动 |
| 灵活度 | 最低 | 高 | 最高 |
| 推荐度 | 最高 | 其次 | 最低（依赖关系容易变得复杂） |
标签：Vue,discounted,computed,price,methods,discount,属性 From： https://www.cnblogs.com/ZhuAo/p/16864755.html