vue中的watch监听的配置项

watch（侦听/监听器）

可以对页面中已经定义好的变量进行监听，一旦变量值发生了改变，那么就可以执行一定操作。

普通监听

语法格式一：
new Vue({
	el
	data
	methods
	watch:{
		变量名(newVal[,oldVal]){
			业务逻辑代码...
		}
	}
})
 
语法格式二：
new Vue({
	el
	data
	watch:{
		要监听的变量名:{
			handler([newVal,oldVal]){
				业务逻辑...
			}
		}
	}
})

深度监听

如果要监听的变量类型为对象或者数组时，普通监听无法实现监听变化的效果，需要使用深度监听

例如：有请求需要再也没初始化的时候就执行一次，然后监听他的变化
添加一个配置项：immediate: true; //一般不设置 默认false，错误使用会出现报错现象

new Vue({
	el
	data
	watch:{
		要监听的变量名:{
			handler([newVal,oldVal]){
				业务逻辑...
			},
			deep:true;//显示的进行深度监听
			immediate: true;//提前执行一下  一般不设置  默认值false
		}
	}
})

demo案例

<body>
    <div id="app">
        <p>普通监听</p>
        <input type="text" v-model="msg">
        <p v-show="newVal!=''">最新数据：{{ newVal }} -- 旧数据：{{ oldVla }}</p>
        <p>深度监听</p>
        <input type="text" v-model="userinfo.name">
        <p>{{ userinfo.name }}</p>
        <div v-for="user of users">
            姓名：<input type="text" v-model="user.name"><br>
            年龄：<input type="text" v-model="user.age"><br>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{//数据
                msg:'',
                newVal:'',
                oldVla:'',
                userinfo:{
                    name:''
                },
                users:[
                    {
                        name:'小明',
                        age:18
                    },
                    {
                        name:'小芳',
                        age:19
                    }
                ]
            },
            methods:{//自定义方法
 
            },
            watch:{//侦听
                // 普通监听
                msg(newVal,oldVla){
                    this.newVal = newVal;
                    this.oldVla = oldVla;
                    console.log("数据发送了变化:"+newVal);
                },
                //深监听
                userinfo:{
                    handler(newVal){
                        console.log('用户信息发送改变:'+newVal.name);
                    },
                    deep:true //是否深度监听 默认false
                },
                users:{
                    handler(newVla){
                        console.log('用户信息发送改变');
                    },
                    deep:false
                }
            }
        })
    </script>
</body>

 

posted @ 2023-06-06 17:17  JackieDYH  阅读(66)  评论(0)  编辑  收藏  举报  来源