Vue中watch的详细用法（三种）

分类解析vue中watch的用法：

	1）数据类型
	2）deep immediate

 ** 1. 普通数据类型：**
		 <input type="text" v-model="userName"/>  
		//监听   当userName值发生变化时触发
		watch: {
			userName (newName, oldName) {
				console.log(newName)
			}
		}
		
		watch: {
			userName: {
				handler (newName, oldName) {
					console.log(newName)
				},
				immediate: true
			}
		}
缺点：
只有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，只有当值改变的时候 才会执行
如果我们想在第一次绑定的时候执行此监听函数 则需要 设置 ** immediate为true**




 ** 2.  对象类型：**
 当需要监听对象的改变时，此时就需要设置deep为true
 第三种
		<input type="text" v-model="cityName.name" />
		data (){
			return {
				cityName: {name:'北京'}
			}
		},
		watch: {
			cityName: {
				handler(newName, oldName) {
					console.log(newName)
				},
				immediate: true,
				deep: true
			}
		}
		注意点：如果对象的属性较多，可以之监听某一个属性	'cityName.name':
		
		
 ** 3.  数组类型：**
	数组的变化不需要深度监听

**注意点：**
	在watch中不要使用箭头函数，因为箭头函数中的this是指向当前作用域