Vue进阶（幺捌叁）：IE9兼容性问题-数据初始化问题

前言

在Vue项目开发过程中，以父子组件的形式进行页面调用，在测试过程中发现IE9下，子组件中定义初始化数据dataA=0，执行异步逻辑A，在异步请求方法前，输出dataA结果为0，请求结束后时，后台返回值将dataA赋值为1，输出dataA结果为1。再次触发子组件同样事件，但后台请求结果不满足赋值条件，对dataA不做赋值操作，发现在异步请求方法前后，输出dataA结果为1！
伪码如下：

data () {
	return {
		dataA: 0
	}
}
<script>
	methods: {
		clickA () { alert(dataA)  // IE9下首次触发事件，输出结果为0，第二次触发后台为对dataA赋值情况下，输出结果为1 asynRequestMethod ().then(response => { if (response.isDataA) { this.dataA = 1 } }) alert(dataA)
		}
	}
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

在IE11浏览器下，上述异常输出结果并未复现，而是按照正常逻辑输出。

通过观察输出结果，初步判断IE9存在缓存机制。

修正后的伪码如下：

data () {
	return {
		dataA: 0
	}
}
<script>
	methods: {
		clickA () { alert(dataA) // // IE9下首次触发事件，输出结果为0，第二次触发后台为对dataA赋值情况下，输出结果为0 asynRequestMethod ().then(response => { if (response.isDataA) { this.dataA = 1 } else { this.dataA = 0 // IE9下第二次触发后台方法回复dataA初始值 } }) alert(dataA)
		}
	}
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

有关深层次的Vue机制及IE浏览器机制，欢迎踊跃讨论！

拓展阅读

• 《Vue进阶（九十八）：Vue.set()和this.$set()介绍》
• 《Vue进阶（九十七）：vue给对象动态添加属性和值》
• 《Vue进阶（九十五）：addEventListener() 事件监听》

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/114574669