7.监视属性watch

Posted 言人冰

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了7.监视属性watch相关的知识,希望对你有一定的参考价值。

天气切换案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很info</h2>
			<!-- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 -->
			<!-- <button @click="isHot = !isHot">切换天气</button> -->
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue(
			el:'#root',
			data:
				isHot:true,
			,
			computed:
				info()
					return this.isHot ? '炎热' : '凉爽'
				
			,
			methods: 
				changeWeather()
					this.isHot = !this.isHot
				
			,
		)
	</script>
</html>

运用Vue的一个配置watch,其值为一个配置对象

形式:watch : a:
监视的对象,以什么形式监视

  • 被监视的属性发生变化时,就会调用handler
  • immediate属性为true时,初始化时让handler调用一下
  • watch也可以监视计算属性

下列例子为监视属性“isHot”是否发生变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				监视属性watch:
					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
					2.监视的属性必须存在,才能进行监视!!
					3.监视的两种写法:
							(1).new Vue时传入watch配置
							(2).通过vm.$watch监视
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很info</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>
</html>

提前总结:

  • 1.当被监视的属性发生变化时,回调函数handler()自动调用,进行相关操作
  • 2监视的属性必须存在!!!
  • 3监视的2种写法:
  • 	        (1). new Vue时传入watch配置
    
  •   		    (2).通过vm.$watch监视
    

注意:第二种写法中vm.$watch传的第一个参数不要忘了加引号了

写法1

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue(
			el:'#root',
			data:
				isHot:true,
			,
			computed:
				info()
					return this.isHot ? '炎热' : '凉爽'
				
			,
			methods: 
				changeWeather()
					this.isHot = !this.isHot
				
			,
			 watch:
				isHot:
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用?当isHot发生改变时。
					handler(newValue,oldValue) //两个参数,一个新值,一个旧值
						console.log('isHot被修改了',newValue,oldValue)
					
				
			 
		)
	</script>

写法2

const vm =new Vue()
	vm.$watch('isHot',
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用?当isHot发生改变时。
			handler(newValue,oldValue)
				console.log('isHot被修改了',newValue,oldValue)
			
		)

深度监视

深度监视:

  • (1).Vue中的watch默认不监测对象内部值的改变(一层)。
  • (2).配置deep:true可以监测对象内部值改变(多层)。

备注:
(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构,决定是否采用深度监视。


注:这里的 a 和 b 都是numbers对象里面的2个属性,要监视 a 是否变化 其配置的这样写 ‘numbers.a’,要注意加上引号!

深度监视大概分为两种

A . 监视多级结构中某个属性的变化

B . 监视多级结构中所有的属性的变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_深度监视</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				深度监视:
						(1).Vue中的watch默认不监测对象内部值的改变(一层)。
						(2).配置deep:true可以监测对象内部值改变(多层)。
				备注:
						(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
						(2).使用watch时根据数据的具体结构,决定是否采用深度监视。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h3>a的值是:numbers.a</h3>
			<button @click="numbers.a++">点我让a+1</button>
			<h3>b的值是:numbers.b</h3>
			<button @click="numbers.b++">点我让b+1</button>
			<button @click="numbers = a:666,b:888">彻底替换掉numbers</button>
			numbers.c.d.e
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue(
			el:'#root',
			data:
				isHot:true,
				numbers:
					a:1,
					b:1,
					c:
						d:
							e:100
						
					
				
			,
			
			watch:
				//监视多级结构中某个属性的变化
				/* 'numbers.a':
					handler()
						console.log('a被改变了')
					
				 */
				//监视多级结构中所有属性的变化
				numbers:
					deep:true, //这个deep属性一定要设成true,否则无法监视到深层的属性的变化
					handler()
						console.log('numbers改变了')
					
				
			
		)

	</script>
</html>

watch的简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性_简写</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很info</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue(
			el:'#root',
			data:
				isHot:true,
			,
			computed:
				info()
					return this.isHot ? '炎热' : '凉爽'
				
			,
			methods: 
				changeWeather()
					this.isHot = !this.isHot
				
			,
			watch:
				//正常写法
				/* isHot:
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue)
						console.log('isHot被修改了',newValue,oldValue)
					
				, */
				//简写
				/* isHot(newValue,oldValue)
					console.log('isHot被修改了',newValue,oldValue,this)
				 */
			
		)

		//正常写法
		/* vm.$watch('isHot',
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue)
				console.log('isHot被修改了',newValue,oldValue)
			
		) */

		//简写
		/* vm.$watch('isHot',(newValue,oldValue)=>
			console.log('isHot被修改了',newValue,oldValue,this)
		) */

	</script>
</html>

监视属性 and 计算属性 的区别

computed和watch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,
这样this的指向才是vm 或 组件实例对象。

以上是关于7.监视属性watch的主要内容,如果未能解决你的问题,请参考以下文章

7.监视属性watch

7.监视属性watch

7.监视属性watch

Vue之监视属性

Vue2.0学习—监视属性(三十五)

vue计算属性computed和监视器watch的使用