---

watch

在Vue中，允许用户在数据改变时，做出一定的处理。

语法：

new Vue({
	watch:{
		属性名:{
			handler(newValue, oldValue){
				// 函数体
			}		
		}
	}
})

当一个属性被写入watch中，每当这个属性值修改，就会调用对应的handler方法，该方法的第一个参数为旧值，第二个参数为新值。

示例：

<div id="root">
	<button @click="num++">num加一</button>
</div>

<script type="text/javascript">
	const vm = new Vue({
		el:'#root',
		data:{
			num: 0
		},
		watch:{
			num:{
				handler(newValue,oldValue){
					console.log(oldValue, " -> ", newValue)
				}
			}
		}
	})
</script>

以上代码中，设置了一个按钮，每次点击按钮num++。在Vue实例中侦听num属性，当num的值发生改变，就会调用handler方法。

输出结果：

如果加上immediate: true属性，那么当整个Vue初始化时，也会调用一次侦听属性的方法：

const vm = new Vue({
	el:'#root',
	data:{
		num: 0
	},
	watch:{
		num:{
		    immediate: true,
			handler(newValue,oldValue){
				console.log(oldValue, " -> ", newValue)
			}
		}
	}
})

输出结果：

这次多了一个undefined -> 0的过程，也就是第一次初始化data.num的过程，也触发了侦听属性。

如果侦听属性中不带有任何其他属性，只有一个handler，可以简写：

new Vue({
	watch:{
		num(newValue,oldValue){
			console.log(oldValue, " -> ", newValue)
		}
	}
})

也就是直接把被侦听的属性num写为一个函数，而不是一个对象。

---

深度侦听

当被侦听的属性是一个对象时，修改对象的属性不会触发侦听属性，只有整个对象都被替换，才会触发侦听属性。

<div id="root">
	<h3>a的值是:{{nums.a}}</h3>
	<button @click="nums.a++">a+1</button>
	<button @click="nums = {a:666,b:888}">彻底替换掉nums</button>
</div>

<script type="text/javascript">
	const vm = new Vue({
		el:'#root',
		data:{
			nums:{
				a:1,
				b:100
			}
		},
		watch:{
			nums:{
				handler(){
					console.log('nums changed')
				}
			}
		}
	})
</script>

以上代码中，对对象nums进行侦听，如果属性修改触发回调函数。在nums中包含a b两个属性。在两个按钮中，一个让a++，另一个直接替换掉整个nums。

输出结果：

将a的值一直添加到10，都没有触发侦听属性的回调函数。

替换掉整个nums，才会触发回调，输出nums changed。

如果希望当任意一个属性值被修改时，都能触发对象的回调，可以添加deep: true属性：

nums:{
	deep:true,
	handler(){
		console.log('nums changed')
	}
}

这样不论对象内部有多少层嵌套，都会触发对象的侦听属性。

---

异步任务

绝大部分情况下，watch的任务，computed都可以完成，但是watch的功能其实比computed更加强大，比如computed无法处理异步任务。

示例：

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	全名：<span>{{fullName}}</span> <br/><br/>
</div>

<script type="text/javascript">
	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName:'三'
		},
		computed: {
			fullName(){
				return this.firstName + '-' + this.lastName
			}
		}
	})
</script>

以上代码，是一个通过姓和名得到姓名的过程，fullName通过计算属性实现。

假设要求fullName在姓或名修改后一秒，再输出新名称，这就需要使用setTimeout创建一个异步任务：

computed: {
	fullName(){
		let name
		setTimeout(()=>{
			name = this.firstName + '-' + this.lastName
		},1000);
		return name
	}
}

输出：

结果fullName直接不输出了，因为fullName依赖于函数返回值，但是函数返回值是name，这个变量一开始是let name，随后进入异步任务setTimeout中拿到name = this.firstName + '-' + this.lastName，不过当异步任务还没有返回，就直接return name了，这导致name = undefined，Vue直接不输出。

watch就可以处理异步任务：

new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三',
		fullName:'张-三'
	},
	watch:{
		firstName(val){
			setTimeout(()=>{
				this.fullName = val + '-' + this.lastName
			},1000);
		},
		lastName(val){
			setTimeout(()=>{
				this.fullName = val + '-' + this.lastName
			},1000);
		}
	}
})

对firstName和lastName进行侦听，在侦听的函数内部，执行异步任务setTimeout，修改fullName。由于fullName是一个存在于data内部的变量，当一秒后异步任务执行完毕，就会修改data内的值，导致模板重新渲染，实现一秒后更新fullName的值。

---