computed,methods,watch有什么区别?

1. computed vs methods的区别

(1) computed计算属性是有缓存的

(2) methods是没有缓存的

//例子:
<div>
	change change change {{str()}} {{str()}} {{str()}}
</div>

computed:{
	change(){
		console.log('computed')
		return 111
	}
}

methods:{
	str(){
		console.log('methods')
		return 222
	}
}
//页面会显示:111 111 111 222 222 222
控制台会打印: computed methods methods methods 
(说明)

在这种简单的情况下,如此可见:computed的性能会比methods好

但是在特殊情况下,必选要用某个东西,比如:点击按钮要跳转页面的话,那只能用methods

2. computed vs watch的区别

(1) watch是监听,数据或者路由发生了改变才可以响应(执行)

根据如下2个案例总结出

(1) computed可以计算某一个属性的改变,如果某一个值改变了,计算属性会检测到会返回(监听一个值,当多个属性改变,都能计算到)
(2) watch是当前监听到数据改变,才会执行内部代码(监听多个属性,返回一个值)

//案例一:
<div>
	单价:<input v-model="num" type="number">	
	数量:<input v-model="price" type="number">
	总价:{{total}}
</div>
data(){
	return:{
		price:10,
		num:2,
	}
}
computed:{
	total(){
		return price * num
	}
}
解:当输入框修改单价或者数量中任意一个,都能计算出总价(一对多)

//案例二:
<div>
	单价:<input v-model="num" type="number">	
	数量:<input v-model="price" type="number">
	总价:{{total}}
</div>
data(){
	return:{
		price:10,
		num:2,
		total:0
	}
}
watch:{
	num(newVal,oldVal){
		console.log('新值:',newVal)
		console.log('旧值:',oldVal)
		this.total = newVal * this.price
	},
	price(newVal,oldVal){
		console.log('新值:',newVal)
		console.log('旧值:',oldVal)
		this.total = newVal * this.num
	},
	//监听路由
	'route'(){}
}
解:同时监听了单价和数据,当修改输入框中的任何一个,都能计算出总价(多对一)
//此时运行代码,控制台是打印不出任何东西,
原因是:watch监听属性是需要改变值才会监听,
watch监听属性
页面加一个输入框,去修改num,watch才会被监听,打印出数值
<input v-model="num" type="number">