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

安装和使用

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

如何获取子组件的实例

1. 背景

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

   <template><RecycleScrollerclass="scroller":items="list":item-size="32"key-field="id"v-slot="{ item }"><Info ref="info">{{ item.name }}</Info></RecycleScroller>
   </template>
   

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

2. 解决方案

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

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

   <RecycleScrollerclass="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()));
   

   这样打印出来的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();}}
   );
   

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

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

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

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