当前位置：网站首页>11. Monitoring attribute - Watch

11. Monitoring attribute - Watch

2022-07-20 08:40:00 【Where the wind falls】

One 、 Monitoring properties watch

1. When the monitored attribute changes , Callback function automatically calls , Carry out relevant operations
2. Monitored properties must exist , To monitor
3. There are two ways to write surveillance
（1）new Vue Time passes in watch To configure
（2） adopt vm.$watch monitor

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title> Weather Cases _ Monitoring properties </title>
		<!--  introduce Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				 Monitoring properties watch：
					1. When the monitored attribute changes ,  Callback function automatically calls ,  Carry out relevant operations 
					2. Monitored properties must exist , To monitor ！！
					3. There are two ways to write surveillance ：
							(1).new Vue Time passes in watch To configure 
							(2). adopt vm.$watch monitor 
		 -->
		<!--  Prepare a container -->
		<div id="root">
			<h2> It's very... Today {
   {info}}</h2>
			<button @click="changeWeather"> Switch weather </button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? ' scorching hot ' : ' cool '
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, // When initializing, let handler Call 
					//handler When to call ？ When isHot When there is a change .
					handler(newValue,oldValue){
						console.log('isHot It was modified ',newValue,oldValue)
					}
				}
			} */
		})

		vm.$watch('isHot',{
			immediate:true, // When initializing, let handler Call 
			//handler When to call ？ When isHot When there is a change .
			handler(newValue,oldValue){
				console.log('isHot It was modified ',newValue,oldValue)
			}
		})
	</script>
</html>

Two 、 Deep surveillance

1.Vue Medium watch By default, changes in internal values of objects are not monitored （ First floor ）
2. To configure deep:true You can monitor the changes of internal values of objects （ Multi-storey ）
remarks ：
vue It can monitor the changes of internal values of objects , but vue Provided watch By default, you can't
Use watch According to the specific structure of the data , Decide whether to use deep monitoring

Weather Cases ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title> Weather Cases _ Deep surveillance </title>
		<!--  introduce Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				 Deep surveillance ：
						(1).Vue Medium watch By default, changes in internal values of objects are not monitored （ First floor ）.
						(2). To configure deep:true You can monitor changes in the internal values of objects （ Multi-storey ）.
				 remarks ：
						(1).Vue It can monitor the change of the internal value of the object , but Vue Provided watch By default, you can't ！
						(2). Use watch According to the specific structure of the data , Decide whether to use deep monitoring .
		 -->
		<!--  Prepare a container -->
		<div id="root">
			<h2> It's very... Today {
   {info}}</h2>
			<button @click="changeWeather"> Switch weather </button>
			<hr/>
			<h3>a The value of is :{
   {numbers.a}}</h3>
			<button @click="numbers.a++"> I'll let you know a+1</button>
			<h3>b The value of is :{
   {numbers.b}}</h3>
			<button @click="numbers.b++"> I'll let you know b+1</button>
			<button @click="numbers = {a:666,b:888}"> Completely replace numbers</button>
			{
   {numbers.c.d.e}}
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
			computed:{
				info(){
					return this.isHot ? ' scorching hot ' : ' cool '
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					// immediate:true, // When initializing, let handler Call 
					//handler When to call ？ When isHot When there is a change .
					handler(newValue,oldValue){
						console.log('isHot It was modified ',newValue,oldValue)
					}
				},
				// Monitor the change of an attribute in the multi-level structure 
				/* 'numbers.a':{
					handler(){
						console.log('a Has been changed ')
					}
				} */
				// Monitor the changes of all attributes in the multi-level structure 
				numbers:{
					deep:true,
					handler(){
						console.log('numbers Changed the ')
					}
				}
			}
		})

	</script>
</html>

3、 ... and 、 Monitoring attribute abbreviation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title> Weather Cases _ Monitoring properties _ Abbreviation </title>
		<!--  introduce Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!--  Prepare a container -->
		<div id="root">
			<h2> It's very... Today {
   {info}}</h2>
			<button @click="changeWeather"> Switch weather </button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? ' scorching hot ' : ' cool '
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				// Normal writing 
				/* isHot:{
					// immediate:true, // When initializing, let handler Call 
					// deep:true,// Deep surveillance 
					handler(newValue,oldValue){
						console.log('isHot It was modified ',newValue,oldValue)
					}
				}, */
				// Abbreviation 
				/* isHot(newValue,oldValue){
					console.log('isHot It was modified ',newValue,oldValue,this)
				} */
			}
		})

		// Normal writing 
		/* vm.$watch('isHot',{
			immediate:true, // When initializing, let handler Call 
			deep:true,// Deep surveillance 
			handler(newValue,oldValue){
				console.log('isHot It was modified ',newValue,oldValue)
			}
		}) */

		// Abbreviation 
		/* vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot It was modified ',newValue,oldValue,this)
		}) */

	</script>
</html>

原网站

版权声明
本文为[Where the wind falls]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190503370317.html