vue3使用vue-virtual-scroller虚拟滚动遇到的问题

安装和使用

见官方文档：https://github.com/Akryum/vue-virtual-scroller/tree/master/packages/vue-virtual-scroller

如何获取子组件的实例

1. 背景

   本来正常情况下，要获取v-for渲染的子组件的实例，通过ref绑定即可获取到数组，并通过index即可定位到vue实例

   <template>
     <RecycleScroller
       class="scroller"
       :items="list"
       :item-size="32"
       key-field="id"
       v-slot="{ item }"
     >
       <Info ref="info">
         {{ item.name }}
       Info>
     RecycleScroller>
   template>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

   但是由于这里使用的是虚拟列表，info.value打印出来的结果只是渲染出来的第一个实例

2. 解决方案

   发现，通过为每一个组件绑定不同的ref，通过这多个ref能够获取到每一个实例，比如info0.value、info1.value

   那么，就只需要根据list动态的创建多个ref，优化方案，多个ref放到数组中，通过index访问

   <RecycleScroller
       class="scroller"
       ref="scroller"
       :items="arr"
       :item-size="145"
       :buffer="400"
       key-field="itemCode"
       v-slot="{ item, index }"
   >
       <OutInfo
       :ref="outInfoRefs[index]"
       />
   RecycleScroller>
   
   //子组件的实例（这里通过数组来进行存储，每一个实例存储一个）
   const outInfoRefs: any = [];
   arr.value.forEach(item => outInfoRefs.push(ref()));
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17

   这样打印出来的outInfoRefs将会是多个ref实例

   注意：这里打印出来的并没有所有的，只有视口上展示出来的加上不可见的预加载的几个

   比如是这样的：[null, null, null, ref(), ref(), ref(), ref(), null, null, null]

如何保存不在视口区域内的子组件的状态

1. 背景

   如果你在子组件的onMounted中输出日志的话，会发现，只有一开始加载的几个元素会输出，后面为了提高效率只是重复渲染这已经加载的几个元素而已

   那么问题来了：实际上不同的子组件里面的状态是不一样的，传递进去的props是会获取到的，但是自己维护的是不变的

   比如每个子组件有一个input，你在第一个输入了一个hello，假定你重复渲染的子组件是5个，那么在第6个子组件渲染的时候，你会惊奇的发现他已经变成了hello，这显然不是我们需要的结果

2. 解决方案

   前面说过，props是会正常获取到的，那么通过watch到props的变化，比如传递一个index

   然后在这个watch中根据需要，去初始化组件状态，那么就可以实现

   watch(
     () => props.index,
     (newVal) => {
       // 由于使用的是虚拟滚动，每个子元素是复用的，css样式会保留，通过监听index的变化，来达到重新渲染每个子元素的效果
       if (props.focusIndex === newVal) {
         // 如果当前子元素是选中的，那么需要进行一些操作
       } else {
         // 如果当前子元素不是选中的，那么需要进行另一些操作
         doBlur(1);
         delColor();
         editIsDisabled();
       }
     }
   );
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

3. 另一个问题（赋初值，保存变化值）

   假定第一个元素的input已经赋值了hello，如果通过上面的代码的话，那么第6个已经正常置空了

   但是回去到第1个时候，会发现也被置空了，但是并不能通过props获取到刚才的改变，因为没有保存

   因为子元素无法保存，但是对应的数据是可以保存的，比如添加一个属性tempValue，在change的时候，通过props进行改变，然后在watch的时候赋值上去，这样是可行的