(文章目录)
一、前言
在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浏览器机制，欢迎踊跃讨论！
