Vueステップアップ(八十九):Vueにおけるwatchの使い方

Vueでは、watchでデータの変化に応答し、サンプルコードは以下の通りである.
第一の方法

  
//   userName        
watch: {
	userName (newName, oldName) {
		console.log(newName)
	}
}

1つ目の方法は、値が最初にバインドされたときにリスニング関数が実行されず、値が変更されたときにのみ実行されるという欠点があります.
このリスニング関数を最初のバインド時に実行する場合は、immediateをtrueに設定する必要があります.たとえば、親コンポーネントがサブコンポーネントに動的に値を渡す場合、サブコンポーネントpropsが親コンポーネントからのデフォルト値を初めて取得する場合にも、関数を実行する必要があります.この場合、immediateをtrueに設定する必要があります.
第2の方式

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

immediateは、watchで最初にバインドされたときにhandlerを実行するかどうかを表し、値がtrueであればwatchで宣言されたときにhandlerメソッドを直ちに実行し、値がfalseであれば、一般的にwatchを使用するのと同様に、データが変化したときにhandlerを実行します.
1つのオブジェクトの変更を傍受する必要がある場合、通常のwatchメソッドではオブジェクトの内部属性の変更を傍受することができず、dataのデータのみが変更を傍受することができ、deep属性がオブジェクトを深く傍受する必要がある.
第3の方法

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

注:モニタリング対象の場合、newVal==oldVal
cityNameのすべての属性にリスニング関数が追加され、属性が多い場合、各属性値の変化によってhandlerが実行されます.オブジェクトのプロパティ値を1つだけリスニングする必要がある場合は、文字列の形式でオブジェクトのプロパティをリスニングできます.

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

注

配列の変化は深さ傍受を必要としない.

は、矢印関数のthisが現在の役割ドメインを指すため、watchでは矢印関数を使用しないでください.