vue开发组件时踩过的一些坑

开发vue组件踩过的坑

前言

近期又完成一个vue项目，公司好像十分看好vue框架，之后的几个项目也准备使用vue框架。然而回想起之前，使用vue开发组件时遇到的各种bug,心中一阵后怕。在此记录下那些填坑的历程，方便以后查阅。

问题

1. input输入出现白屏问题
   项目要求header部分固定，main部分可以滚动，css3实现main的css:

   .main{
          overflow: hidden;
          height: calc(100vh - 40px);
          position: relative;
          ....         
       }

   聚焦时，键盘弹起，屏幕滚动，因此出现白屏。
   只需在main的样式中加上：transform: scale(0);
   推荐一篇transform对position影响的博客，CSS3 transform对普通元素的N多渲染影响

2. scroller组件出现白屏问题
   项目中使用了better-scroll实现一个上拉加载更多和下拉刷新的组件，测试发现部分手机，无法显示列表。具体原因目前不清楚，但是估计是better-scroll使用了transform的锅。一开始以为是部分手机不支持calc计算，因此在组件的计算属性里计算出屏幕高度，然并卵。可是，将计算的高度发在vue钩子函数mounted中，竟然起作用了，太神奇了

3. input[type=file]上传 图片问题
   开发上传图片组件时，input[type=file]会调用原生相册或者相机，由于安卓和IOS对系统的保护，屏蔽了input[type=file]的功能，这个需要原生代码实现
4. JSON数据量很大(约1.5M),卡屏问题
   开发tree组件时，正常情况使用v-show来控制tree的折叠和展开，由于数据量很大，出现卡屏问题。网上搜索了一下，v-if在这种情况会比v-show性能更好。
   使用v-if出现当折叠起来的元素被选中时，其子元素没被选中。这时需要操作数据源，将其设置为选中状态。