监听

mengxiangjiaxinshui

于 2020-12-29 20:20:38 发布

阅读量243

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/hhhhhhhhhhhhhhhc/article/details/111936417

vue 专栏收录该内容

9 篇文章

订阅专栏

博客介绍了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>