ios9下vue使用踩坑记录

问题描述

使用vue开发单页的通讯录选择器组件后。

在iOS 10 和 iOS 8下都正常运行。

就在iOS 9下出现问题，vue的循环渲染都正常，一开始的数据也能取到。证明不是vue的兼容性问题

但是在用户点击选择下一级目录后发现不能点击进入。

主要障碍

iOS 9是一个过时的版本，公司研发部都没有使用iOS 9的用户，导致了不能进行测试。

这里特别感谢一个工具

vconsole.js

这个工具在引入页面后可以打印出所有的console.log()的事件。帮助开发者在移动端调试。

如果让用户远程测试，要不断的编译js，部署到开发目录，然后提交到线上，然后通知用户测试，截图告诉问题所在。

这整个过程非常耗时，而且用户也描述不清楚问题的所在。

解决过程

我们在自己的电脑中安装Xcode，和IOS 9模拟器。

快速部署，修改webpack的输出目录。让编译后无需手动复制到对应目录。加快调试时间

问题所在

发现问题是因为iOS 9在最后赋值给vue的响应式变量时。会将数组重叠。

如图

image

观察该数组，发现数组重复，竟然索引也一样！
闻所未闻！

观察我们的循环函数使用

for(let i in array){
    let item = array[i];
    ......
}

以上写法会导致这样的数组重复遍历。
导致后面的逻辑都出错。

解决方案

for(let i=0 ; i<array.length ; i++){
    ...
}

所幸这样的数组它的 .length值是正常的。我们就可以采用这种报数的写法去完成遍历。

注意 ：这里有个问题，不是所有的用到for(let i in array)的地方都需要这样处理，object类型的必须使用这样的遍历循环。