一、前言
在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浏览器机制，欢迎踊跃讨论！
二、拓展阅读
三、延伸阅读
在项目开发过程中遇到这样一个问题，新建表单时用element的select多选以后，在编辑的时候打开表单发现其他组件数据能正常显示，多选却无法正常回显。
表单代码如需：
<el-select v-model="textForm.receDeptIds" multiple filterable allow-create default-first-option @change="changeSelect" placeholder="请选择接收部门"> <el-option v-for="item in deptData" :key="item.id" :label="item.name" :value="item.id"> </el-option></el-select>
复制代码
js 逻辑代码如下：
// 编辑handleEdit(data){ this.textShow=true; this.textForm=data; this.changeSelect(data); //触发此方法},
changeSelect(data){ let UserIds = data.receUserIds.toString() let peoData = UserIds.split(',') peoData.foreach((item, index, peoData) => { peoData[index] = Number(item) + '' }) // 或者按照如下逻辑// for(var i=0; i<peoData.length; i++)// {// peoData[i]=parseInt(peoData[i]) + ''// } this.textForm.receDeptIds = dpData},
复制代码
总结：changeSelect方法是在打开编辑表单后，对select多选选择器回显内容作处理的方法。由于el-select绑定值为字符数组类型，通过定义数组 UserIds，需将拿到的数据先做一个toString后再赋值给 UserIdS（不这样做，直接赋值的话，控制台会一直报split不是一个函数的错误）。用split方法将 UserIds 转换为逗号分隔的数组，对 peoData 作循环操作，每个元素去除双引号（Number或parseInt方法转一下就好）并转为字符。最终赋值给 receUserIds。回显问题解决。
3.1 拓展阅读
评论