vue中计算属性和watch的区别和使用方法

计算属性computed和watch的区别

通俗的来说既能实现computed又能够实现watch的推荐使用computed，重点在于computed的缓存功能。computed是用来声明式的描述一个值依赖其它的值，当所有依赖的值或者变量改变的时候，计算属性也会随着该变；watch主要是监听data里面的定义的量，当该变量变化的时候，触发watch

两者的主要区别

1. 计算属性的依赖值改变会重新执行函数，计算属性是取返回值来作为最新的结果，所以里面不能异步的返回结果（一定要多注意，吃的亏越多，越明白它的重要性），不能写异步逻辑
2. watch函数的值改变watch重新执行，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。

验收一下

<div id="app">
	{{msg}}
</div>
<div>
	{{newValue}}
</div>
<button @click="handleClick">点击</button>
 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
 <script>
	let vm = new Vue({
		el: "#app",
		data:{
		msg: "hello",
		newValue:""
		},
		methods:{
			handleClick(){
				this.msg="hello1"
			}
		},
		watch:{
			msg(newValue){
				setTimeout(()=>{
					this.newValue=newValue
				}, 1000);
			}
		}
	})
</script>

使用计算属性则无法在里面写一些逻辑

<div id="app">
	{{msg}}
</div>
<div>
	{{newValue}}
</div>
<button @click="handleClick">点击</button>
 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script>
	let vm = new Vue({
		el:"#app",
		data:{
			msg:"hello",
			temp:""
		},
		computed:{
			newValue(){
				if(this.temp){
					// 不能写异步的代码
					// setTimeout(()=>{
					//		return msg
					//	}, 1000)
					return this.mag
				},else{
					return this.temp
				}
			}
		},
		methods:{
			handleClick(){
				this.msg="hello1",
				this.temp="hello1"
			}
		}
	})
</script>