导航：首页 > 开发技术 >

Vue的computed计算属性怎么用

发表于：2025-01-18 作者：千家信息网编辑

千家信息网最后更新 2025年01月18日，这篇文章主要介绍"Vue的computed计算属性怎么用"，在日常操作中，相信很多人在Vue的computed计算属性怎么用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答

千家信息网最后更新 2025年01月18日Vue的computed计算属性怎么用

这篇文章主要介绍"Vue的computed计算属性怎么用"，在日常操作中，相信很多人在Vue的computed计算属性怎么用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Vue的computed计算属性怎么用"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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