vue中的watch和computed

Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。

Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销哦

Watch监听数据变动的方法：
1.普通数据

data() {
   	 return {
        num: 0    
    }
 }, 
watch: {
    num(newValue, oldValue) {
        console.log(newValue)
    } 
}

2.监听对象内部属性的变化有三种方式：
第一种添加deep:true：

data(){
	return{ 
    	cityName: {id: 1, name: 'shanghai'}
	}	
}
watch: {
   cityName: {
     handler(newName, oldName) {
     // ...
   },
   deep: true,//是否深度监听
   immediate: true//是否在首次watch绑定数据的时候就执行一次handler
 }

第二种使用字符串形式：

data(){
	return{ 
    	cityName: {id: 1, name: 'shanghai'}
	}	
}
watch: {
  'cityName.name': (newName, oldName) {
    // ...
  },

第三种可配和computed使用：

data(){
	return{ 
    	cityName: {id: 1, name: 'shanghai'}
	}	
},
 computed:{
	name(){
		return this.cityName.name;
	}
}，
watch: {
 	name(newName, oldName) {
     // ...
   },