Vue的computed计算属性你了解吗 Vue的computed计算属性你了解吗

computed计算属性

1、什么是计算属性
2、为什么要用计算属性
3、compute、methods和watch三者的区别
4、案例：遍历数组对象的时候进行监视

总结

computed计算属性
1、什么是计算属性
计算属性本质是方法，只是在使用这些计算属性的时候，把他们的名称直接当作属性来使用，并不会把计算属性当作方法去调用，不需要加小括号 ()调用。

2、为什么要用计算属性
当你需要一个属性是需要经过一些计算的，比如你要一个discounted折扣后的钱属性，现在有price价格，和discount折扣。那么discounted=price*discount。discounted与现有的属性price和discount相关联。
要得出discounted的值，我们可以这样写。

{{price*discount}}

我们不是要 discounted属性吗，这样写貌似不需要添加一个属性，直接用表达计算出折扣后的值就行了。
那么，如果非要得到个discounted呢，我们可能会想到用methods写个方法进行计算

<！--template-->原价：
现价： <！--script-->data() {return {price:100,discount:0.8}}，methods: {discounted(){this.price*discount}},

再看看vue的comunidad计算属性

<！--template-->原价：
现价： <！--script-->computed: {discounted(){return this.price*this.discount}},

文章图片

我们又会想，用表达式price*discount不就可以得出discounted吗，为什么还要费那么大功夫写什么方法，computed。
那么问题就来了，如果我们的discounted是根据你买的金额，按一下规则来：

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

4、案例：遍历数组对象的时候进行监视
那么我们一般对数组监视，在遍历的时候对当前数组的对象进行监视，我们该怎么做呢。
computed也是也可以传参的，我们要检测哪个对象，把当前对象传入就可以了，这样检测的数据就是动态的。
我直接用昨天玩css写的例子吧。这里只需要关注价格，其他可以忽略，我也懒得改了，哈哈。

body {background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%); }.container {margin: 0 auto; width: 400px; /* border: 1px solid black ; */}.list-item {margin-top: 40px; }p {margin: 10px 40%; }.list-item img {width: 100%; height: 300px; border-radius: 20px; box-shadow: 5px 10px 13px 3px rgba(110, 115, 127, 0.5); opacity: 0.8; transition: 0.8s; }.list-item img:hover {opacity: 1; }.item-select {width: 100%; height: 80px; position: relative; }/* .item-select button {color: white; font-weight: bold; font-family: 幼圆; margin-top: 20px; width: 100px; height: 55px; margin-left: 90px; background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%); padding: 15px; display: inline; font-size: 18px; text-align: center; border-radius: 10px; transition: 0.5s; white-space: nowrap; border: 1px #dee7ec solid; opacity: 0.8; }button:hover {background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%); color: white; width: 105px; height: 60px; } */.list-item svg{width: 60px; height: 60px; margin: 20px 170px; position:absolute; left: 0; top: 0; transition: 0.3s; }.list-item svg:hover{width: 65px; height: 65px; transition: 0.1s; }