标签：Vue watch isHot handler oldValue 监视 newValue 属性

1.监视属性watch:

1.当被监视的属性变化时,回调函数自动调用,进行相关操作

2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置

(2).通过vm.$watch监视

html里直接{{isHot}}

<script type="text/javascript">
	const vm = new Vue({
		el: " #root",
		data:{
			isHot:true,
		},
		//写程序时确定要监视什么属性，用这个
		watch:{
			isHot:{
			immediate:true,//初始化时先让handler调用一次
			//handler什么时候调用?当isHot发生改变时。
			handler(newValue,oldvalue){ //两个参数为修改后的值和修改前的值
				console.log( 'isHot被修改了' ,newValue,oldValue)
			}
		}
	})
		
	//需要后续添加监视属性时用这个
	vm.$watch( "isHot",{
		immediate:true,
		handler(newValue,oldValue){
			console.log( 'isHot被修改了',newValue,oldValue)
		}
	})
</script>

2.深度监视
(1).vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变（多层）。

备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!

(2).使用watchl时根据数据的具体结构,决定是否采用深度监视。

const vm =new Vue({
		el: " #root",
		data:{
			isHot:true,
			numbers:{
				a:1,
				b:1
			}
		},
		watch:{
			numbers:{
				deep:true, //watch默认不监控第二层的数据a,b，只监控第二层的地址值，再深就不管了
//开启deep后，会监视第二层以及之后内容的改变
				handler(){
					console.log("number改变了")
				}
			}
		}
	)}

3.watch简写

简写的条件：只有handler，没有immediate、deep等其他属性

//后续添加监视
	vm.$watch("isHot",{
		immediate:true,
		handler(newValue,oldValue){
			console.log( 'isHot被修改了',newValue,oldValue)
		}
	})
//后续添加监视的简写
	vm.$watch("isHot",function(newValue,oldValue){
		console.log( 'isHot被修改了',newValue,oldValue)
    })

标签：Vue,watch,isHot,handler,oldValue,监视,newValue,属性
来源： https://blog.csdn.net/qq_36582776/article/details/121116127

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。