监听

博客介绍了Vue监听器的相关内容。监听器作为Vue实例的配置选项watch,可检测变量值变化并触发相应函数。其中,普通监听能检测标量类型数据变化,而深度监听需添加deep配置选项,用于监听对象、数组等复合类型数据的变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

监听器

侦听器

作用:检测变量值的变化,只要数据变化,就可以触发相应的函数执行一定的操作。

作为vue实例的配置选项,watch

1.普通监听

可以检测标量类型数据的变化:字符串、数字(整数、浮点数)、布尔值

当依赖的数据发生变化时,就会触发对应的函数

①写法一

<script>
	new Vue({
		el:"",
		data:{ipt:''},
		watch:{
			ipt([newVal,oldVal]){
				....
			}
		}
	})
</script>

②写法二

<script>
	new Vue({
		el:"",
		data:{ipt:''},
		watch:{
			ipt:{
                handler([newVal,oldVal]){...}
            }
		}
	})
</script>

2.深度监听

如果要监听的数据类型是复合类型时,普通的监听方式是无法实现,需要使用第二种写法并添加deep配置选项,来实现监听复合类型数据的变化。

复合类型:对象、数组

<script>
	new Vue({
		el:"",
		data:{
            info:{ name:'' }
        },
		watch:{
			info:{
                handler:function([newVal,oldVal]){...},
                deep:true//显示的设置为深度监听
            }
		}
	})
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值