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>
    

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

  2. 解决方案

    发现,通过为每一个组件绑定不同的ref,通过这多个ref能够获取到每一个实例,比如info0.valueinfo1.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]

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

  1. 背景

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

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

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

  2. 解决方案

    前面说过,props是会正常获取到的,那么通过watchprops的变化,比如传递一个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的时候赋值上去,这样是可行的