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

安装和使用

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

如何获取子组件的实例

背景

本来正常情况下，要获取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>

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

解决方案

发现，通过为每一个组件绑定不同的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()));
```
这样打印出来的outInfoRefs将会是多个ref实例

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

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

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

背景

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

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

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

解决方案

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

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

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

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

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

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

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