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>

在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>

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

拓展阅读

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