watch跟computed的区别

相信有部分人在使用watch和computed时往往分不清该用哪一个。以下介绍两者的区别

在Vue中，watch和computed都是用来监听数据变化的工具，但是它们有一些明显的区别。

watch用于监听特定数据的变化，并执行相应的回调函数。
当监听的数据发生变化时，回调函数会被调用。watch可以用来监听任何一个数据，包括基本数据类型、对象、数组等。

computed是计算属性，它是根据相关数据的变化而自动计算出来的。
computed是基于其相关依赖进行缓存的，只有依赖的数据发生变化时，才会重新计算。因此，computed适用于根据已有数据衍生出来的数据，用来减少计算量和提高性能。
computed中的函数必须要用return返回

只要依赖的数据发生变化，watch会立即执行回调函数，而computed会缓存计算结果，只有在依赖的数据变化时，才会重新计算。

watch可以处理异步操作，因为在回调函数中可以进行异步操作；而computed是同步的，不支持异步操作。

那么该怎么权衡使用watch还是computer呢？
有个好用的方法：
当一个属性受多个属性影响的时候，使用computed。
当一条数据影响多条数据的时候，使用watch。

例如:
购物车的总金额，受多个商品价格的影响，则用computed

computed:{
	totalPrice(){
		return this.price1 + this.price2 + this.price3
	}
}

当需要监听输入框中输入的数据进行验证或其他操作

watch:{
	inputData(value){
		this.verification(value) //验证函数
		this.xxxxx // 操作1
		this.xxxxx// 操作2
	}
}