vue中watch监听，ajax异步问题解决

getResult(){ 	//组装requestParam1和requestParam2参数  	let requestParam1 = {} 	let requestParam2 = {} 	requestParam1.screen = this.screenData; 	requestParam1.dimension = [this.dimensionData[0]]; 	requestParam1.measure = this.measureData; 	requestParam1.formInline = this.formInline || {}; 	requestParam1.tableSel = this.tableSel; 	requestParam1.chartType = "scatter"; 	 	requestParam2.screen = this.screenData; 	requestParam2.dimension = [this.dimensionData[1]]; 	requestParam2.measure = this.measureData; 	requestParam2.formInline = this.formInline || {}; 	requestParam2.tableSel = this.tableSel; 	requestParam2.chartType = "scatter"; 	 	//调方法 	this.getChartDataLater(requestParam1); 	this.getChartDataLater(requestParam2);  	//得到返回的this.results 	let _options = JSON.parse(JSON.stringify(this.chartOptions)); 	let _temp_options = scatterRender(this.dimensionData, this.measureData, _options, this.results); 	if(_temp_options){ 		this.chartOptions = _temp_options; 	} },  getChartDataLater(val) { 	getChartData(val).then(res => { 		this.results.push(res); 	}).catch(err => { 		console.log(err); 	}); } 

• 上面的这种写法可能会出现，getChartDataLater方法还没执行完成，this.results这个数组还没有push两次（可能ajax异步导致），就执行了下面得到_options的代码，这时候参数中this.results还只是个空数组

getResult(){ 	//组装requestParam1和requestParam2参数  	let requestParam1 = {} 	let requestParam2 = {} 	requestParam1.screen = this.screenData; 	requestParam1.dimension = [this.dimensionData[0]]; 	requestParam1.measure = this.measureData; 	requestParam1.formInline = this.formInline || {}; 	requestParam1.tableSel = this.tableSel; 	requestParam1.chartType = "scatter"; 	 	requestParam2.screen = this.screenData; 	requestParam2.dimension = [this.dimensionData[1]]; 	requestParam2.measure = this.measureData; 	requestParam2.formInline = this.formInline || {}; 	requestParam2.tableSel = this.tableSel; 	requestParam2.chartType = "scatter"; 	 	//调方法 	this.getChartDataLater(requestParam1); 	this.getChartDataLater(requestParam2); }；  getChartDataLater(val) { 	getChartData(val).then(res => { 		this.results.push(res); 		//定义一个 a_watch 初始值为0，每执行一次getChartData就自增1 		//在watch中监听 a_watch 为2时，说明getChartData已经执行了两次，this.results数组组装完成 		this.a_watch = this.a_watch + 1 	}).catch(err => { 		console.log(err); 	}); }  //watch watch : { 	a_watch(newval, oldVal) { 		console.log(newval, oldVal) 		//第一次getChartData执行完，newval=1，oldVal=0 		//第二次getChartData执行完，newval=2，oldVal=1 		//newval=2时，this.results已经组装完成 		if(newval == 2){ 			console.log(this.results) 			let _options = JSON.parse(JSON.stringify(this.chartOptions)); 			let _temp_options = scatterRender(this.dimensionData, this.measureData, _options, this.results); 			if(_temp_options){ 				this.chartOptions = _temp_options; 			} 		} 	} } 

1.watch监听data内数据的变化

data: {  a: 100 }, watch: {  a(newval, oldVal) {   // 做点什么。。。   console.log(newval, oldVal)  } } 

2.watch监听整个对象，deep: true 深度监测

data: {  return {   msg: {    name: 'hahah',    color: 'red'   }  } }  watch: {  msg: {   handler(newValue, oldValue) {    // 做点什么。。。    console.log(newValue)  },  deep: true } 

3.watch监听对象内的某一具体属性，可以通过computed做中间层来实现

computed: {  name() {   return this.msg.name  } }, watch:{  name(newValue, oldValue) {    // 做点什么。。。    console.log(newval, oldVal)  } }