Vue计算属性和Watche的区别

1.computed: 计算属性依赖改变会重新执行函数,取返回的最新结果,不能写异步逻辑

• 只有依赖改变,才会重新计算
• 当computed内部有异步操作,无法监听数据变化
• 计算属性是依赖其他属性,多对一或者一对一,一般用computed
• computed 计算的属性不用在data中声明

2.watch : watch监听的值改变watch重新执行,可以进行异步操作

• 不支持缓存,数据发生改变,直接会触发相应的操作
• 监听的函数接收两个参数,第一个是最新的值,第二个是之前的值
• 当一个属性发生变化的时候,需要执行对应的操作
• 监听属性必须是data属性中生命的数据或者组件传过来的数据
• deep:深度监听,为了发现对象内部值的变化,在使用复杂类型的数据时候使用
• watch注意点: deep深度监听数组的变动不需要这么做。deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

watch的配置:

immediate:true, // 首次加载的时候执行函数
deep:true, // 深入观察,监听数组值，对象属性值的变化

<div>{{Name}}</div>
data(){
	return {
		num:0,
		lastname:"",
		firstname:""
	}
}
// name的值发生变化,会调用anme方法,方法里面对应的是name的新值和旧值变化
watch:{
	num(n,o){
		// n新值  o旧值
		console.log(n,o)
	}
}
//计算属性computed,计算的是Name依赖的值,不能计算在data中已经定义的变量
computed:{
	Name(){
		return this.lastname+this.firstname
	}
}