Vueのwatchの高度な使い方

1357 ワード

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