关于Vue中计算属性computed和methods属性的区别，你了解多少呢

文章目录

1、实例
2、computed计算属性中：
- 前提1、当计算属性fn2没有依赖data中的数据时：
- 前提2、：当计算属性依赖data中的数据时：
3、区别：

在做项目过程中，有时会出现同一个需求，在methods属性中写方法可以实现需求，在computed属性中写方法也可以实现需求。那么，既然在methods属性中可以实现我想要的需求，为什么还会有computed计算属性呢？接下来，我们一起看看两者之间有什么区别。

1、实例

<p>methods中方法</p>
//fn1是方法，调用方法需要加（）<p>{{fn1()}}</p><p>{{fn1()}}</p><p>{{fn1()}}</p>

methods: {fn1() {console.log('fn1------------');return new Date()}}

执行结果：

通过执行结果，可以看出：
methods中的方法：每调用一次，就触发一次。

<p>computed中的方法</p>
// fn2是属性，调用时不能加（）【看着像是方法，其实是属性（计算属性）】<p>{{fn2}}</p><p>{{fn2}}</p><p>{{fn2}}</p>

computed: {fn2() {console.log('fn2------------');return new Date()}},

执行结果：

通过执行结果，可以看出：计算属性fn2调用3次，但是实际执行输出只打印1次。也就是说，计算属性fn2多次调用，一次执行。

2、computed计算属性中：

前提1、当计算属性fn2没有依赖data中的数据时：

结果：第一次使用计算属性时，会把第一次的结果进行缓存。后面再使用几次计算属性，都会去第一次的结果进行查找。
计算属性使用时不加（）。
methods中的方法调用几次就会执行几次，没有缓存，性能较低；
computed中的函数多次调用时只会调用一次，多次执行，是有缓存的，性能较高。

前提2、：当计算属性依赖data中的数据时：

data中数据发生变化（与上一次缓存的数据比较）才会调用计算属性中的方法。例如上一篇博客中的例子（相关代码在上一篇博客中：Vue项目中如何使用computed计算属性）：

3、区别：

methods和computed看起来都可以实现我们的功能，为什么还要多一个计算属性这个东西呢？

原因：计算属性会进行缓存，如果多次使用时，计算属性没有依赖data中的数据，计算属性只会调用一次。如果计算属性依赖data中的数据时，只有当data中的数据发生变化（与它最近一次的缓存数据相比），计算属性才会被调用执行，否则不会被调用，只会从缓存中拿数据。
methods 方法和computed计算属性两者的执行结果是完全相同的。

【计算属性是基于它们的依赖进行缓存的，只有在相关依赖发生变化时它们才会重新求值。也就是说，只要它的依赖没有发生变化，那么每次访问的时候，计算属性都会立即返回之前的计算结果。不再执行函数。
methods方法，每当触发重新渲染时，调用方法将总是再次执行函数。
计算属性具有缓存功能，而methods没有。

所以，上面的例子中，当多次调用methods方法时，fn1会被打印3次，而当多次调用计算属性时，第一次调用时，会把属性值进行缓存，会打印出一个fn2），当第二次调用时，会先把属性值和缓存中的值作比较，如果值没有改变，则会直接从缓存中取值进行渲染。以此类推，由于调用3次fn2，而属性值一直没有改变过，所以实际上只会调用一次fn2,打印输出一次fn2。其余2次的渲染结果都是从缓存中获取的属性值。计算价格的同理。】