Vue 中 computed vs methods的区别

computed：计算属性

methods:方法

watch:侦听器

computed与methodes区别

1.computed是响应式的，methods并非响应式。
2.调用方式不一样，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。
3.computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。
4.computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的

在我们的实际开发中，有时很难去确定具体用computed还是methods，因为这两种方法最后的到的结果是一样的，但是他们的原理和用法却完全不同，比如：我们想去时刻监控数据的变化，在视图上显示不同的结果，当然这两中方法都可以实现这种效果，这个时候用computed就比较合理了，因为computed是可缓存的，只要数据层值不改变，computed就不会去改变，而且可缓存，如果数据层的值变了，computed就会实时更新到视图层上，所以说computed是响应式的。

还有一个不同点就是在于computed是以对象的属性方式存在的，在视图层直接调用就可以得到值，例如：

{{msg}}
，而methods必须以函数形式调用，例如：
{{msg()}}
, 可见，computed直接以对象属性方式调用，而methods必须要函数执行才可以得到结果。

computed和methods他们能同时实现一个功能时 ，选择前者，因为compute有缓存；

computed和watch他们能同时实现一个功能时,选择前者，因为更加简洁；

Watch:侦听器

可以监听data数据属性的改变，并且做一些异步操作；如：price（）；
可以监听获取data数据的新值，旧值；如：count(newValue, oldValue)

watch: {
				price() {
					setTimeout(function() {
						console.log("监听price数据的改变，并且3秒后输出console")
					}, 3000);
				},
				count(newValue, oldValue) {
					//newValue:新修改的值；oldValue：原来的旧值
					console.log(newValue, oldValue)
				}
			}

首先我们了解一下computed和methodes在vue中的用法：

其实我们可以看到 他们俩的效果是一样的，但是computed是基于他的依赖缓存，只有相关的依赖发生改变时才会重新取值，而使用methods 在重新渲染的时候，函数总会重新调用执行。

简单的理解，就是computed自带缓存，方法里面的属性值会放置到缓存中，如果属性值不发生改变，多次调用时会直接总缓存中取值，相比而言，method每次调用都会执行该函数，computed 提供缓存是为了海量数据时提高性能。