VUE对json对象属性的监听watch用法详解（单一属性和全体属性）

如何监听json对象的属性变化。

对于下面数据filterdata,如果直接watch对象中method属性变化是无效的，因为监听不到。现在提供两种常用的方法监听属性的变化。

var app1 = new Vue({
	el: "#app
	data: {
		filterdata: {
			methods: [],
			targets: [],
			results: [],
			id: '',
		},
	},

监控所有属性

任何一个属性变化，都会触发watch函数。
关键字 deep:true一定要设定

		watch: {		
				filterdata: {
						handler(newValue, oldValue) {
							var flag=0;
							if (newValue.id === '0') {
								flag=1;
							}								
							if (newValue.methods.length+newValue.targets.length+newValue.results.length > 0) {
								flag=1;
							}								
							this.filteractive = flag;								
						},
						deep: true
					},
			}			

监控某一个属性

单引号内部写 对象.属性名即可实现某个属性变化的监听。

'filterdata.id': function() {
	if (this.filterdata.id === '0') {
		this.filterdata.methods = [];
		this.filterdata.targets = [];
		this.filterdata.results = [];
	}
},
'filterdata.methods': function() {

	if (this.filterdata.methods.length > 0) {
		this.filterdata.id = '';
	}
},
'filterdata.targets': function() {
	if (this.filterdata.targets.length > 0) {
		this.filterdata.id = '';
	}
},

单一属性和全体监控区别

控制精细程度不同，在特定场景下必须监听单一属性，更容易控制。