VUE侦听器

VUE侦听器

侦听器是用来侦测一个属性的变化,然后执行一段逻辑的过程。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
侦听器的两种不同的写法:
1.

 watch:{
            /*要监听的值*/
            info:{
                /*开始时立即执行handler*/
                immediate:true,
                /*当监听的值发生改变时执行*/
                handler(newValue,oldValue){
                    console.log("天气变化了,现在是"+newValue+",原来是"+oldValue);
                }
            }
        }
	app.$watch('info',{
	        handler(newValue,oldValue){
	            console.log("天气变化了,现在是"+newValue+",原来是"+oldValue);
	        }
	    })

当要侦听的数据中有多级结构时,想要数据中多级结构发生改变时,侦听器也能正常运行,则在侦听的属性中添加deep=true,实现数据的深度侦听。

			 /*监听属性有中多级结构的数据变化(侦听单个数据)*/
            'num.a':{
                handler(){
                    console.log("数据A改变了");
                }
            },
            /*监听属性有中多级结构的数据变化(同时侦听多个数据)*/
            num:{
                deep:true,
                handler(){
                    console.log("数据改变了");
                }
            }

当侦听器不需要配置项实现其他功能时,可以简写:

			watch:{
				 flag(){
		                console.log("数据改变了");
		            }
			}
			
			app.$watch('flag',function () {
		        console.log("数据改变了");
		    })
	

你可能感兴趣的:(前端,vue,侦听器,vue.js,javascript,html5)