Vue-computed计算属性

转载于：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
缓存	有	没有	没有
异步	不行	不行	行
触发	模板使用：数据	模板使用：方法	被监控数据发送变动
灵活度	最低	高	最高
推荐度	最高	其次	最低（依赖关系容易变得复杂）