在Vue中，用watch来响应数据的变化

 <input type="text" v-model="userName"/>  

>第一种
//监听   当userName值发生变化时触发
watch: {
	userName (newName, oldName) {
		console.log(newName)
	}
}

第一种有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，
只有当值改变的时候 才会执行
如果我们想在第一次绑定的时候执行此监听函数 则需要 设置
immediate为true

第二种
watch: {
	userName: {
		handler (newName, oldName) {
			console.log(newName)
		},
		immediate: true
	}
}

当需要监听对象的改变时，此时就需要设置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的所有属性都加上监听函数，如果属性较多时 可以使用如下

watch: {
	'cityName.name': {
		handler(newName, oldName) {
			console.log(newName)
		},
		immediate: true,
		deep: true
	}
}

注

1. 数组的变化不需要深度监听
2. 在watch中不要使用箭头函数，因为箭头函数中的this是指向当前作用域

watch computed 区别

computed 不能与 data 里重复 必须有 return 是多个值引起一个值变化 同步
watch 必须和 data 里一样 没有 return 一个值引起多个值的变化 异步