0
点赞
收藏
分享

微信扫一扫

watch监听一个对象中的属性 - Vue篇

吴陆奇 2024-01-14 阅读 15

vue中提供了watch方法,可以监听data内的某些数据的变动,触发相应的方法。
1.监听一个对象


<script>
	
	export default {
		data() {
		    return {
		    	obj: {
					name: '',
					code: '',
					timePicker:[]
				}
		    }
		},
		watch: {
			obj: {
				handler(newVal, oldVal) {
					//todo
				},
				immediate: true,
		     	deep: true // 可以深度检测到 person 对象的属性值的变化
			}
		}
}

<script>

immediate如果为true 代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法。默认为false
deep设置为true,这样,如果修改了search内任何一个属性,都会执行handler这个方法。 有一个缺点是 会影响性能,尤其是对象内结构嵌套过深。
如果只是想监听对象内的某个属性,比如name,则可以选择如下操作方法。
2.监听对象内的某个属性

<script>
	
	export default {
		data() {
		    return {
		    	obj: {
					name: '',
					code: '',
					timePicker:[]
				}
		    }
		},
		watch: {
			obj.name: {
				handler(newVal, oldVal) {
					
				}
				
			}
		}
}

<script>
举报

相关推荐

0 条评论