Vue之watch高级用法

在vue中，使用watch来响应数据的变化。普通用法就不过多说，本文主要介绍下高级用法，immediate、handler以及deep，

一、immediate（首次绑定）

我们想要最初绑定的时候也执行函数，就用到immediate。监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

data(){
	return{
		appid : '123456'
	}
}

----------------------------------------------------------------

watch : {
	appid : {
		handler(v){
			console.log(v)
		},
		immediate : true
	}
}

二、deep（深度监听）

监听对象中的所有属性，对象中的任意属性发生改变都会执行函数

data(){
	return {
		obj : {
			id : '0',
			info : 'one'
		}
	}
}

---------------------------------------------------------------

watch: {
	obj: {
		handler(v){
			console.log(v)
		},
		deep:true
	}
}

三、监听对象中的特定一个属性

监听对象中的特定某一个属性，只有当此属性发生改变时，handler函数才会执行

data(){
	return {
		obj : {
			id : '0',
			info : 'one'
		}
	}
}

---------------------------------------------------------------

watch: {
	'obj.id'(v){
		console.log(v)
	}
}

四、相关文档
vue之侦听器：https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8