[Bug]:vue3使用VirtualWaterfall的unlimitedSize属性报错 Maximum recursive updates exceeded

[nyaooo]

请先确认

• 我已搜索并确定这个提交不是重复的

相关平台

• 所有小程序
• 微信小程序
• 支付宝小程序
• 百度小程序
• 字节跳动小程序
• QQ 轻应用
• 京东小程序
• 快应用平台（QuickApp）
• Web 平台（H5）
• 移动端（React-Native）
• 鸿蒙（harmony）

小程序基础库版本

3.8.7

使用框架

Vue 3

问题描述

使用VirtualWaterfall时，unlimitedSize设为true时，控制台报错 Maximum recursive updates exceeded，不使用unlimitedSize就是正常的

复现链接

无

复现步骤

代码如下

index.vue

<template>
  <view class="test-page">
    <virtual-waterfall
      :column="column"
      :height="600"
      :item-data="list"
      :item-count="dataLen"
      :item-size="itemHeight"
      :item="Row"
      position="relative"
      :unlimited-size="true"
      width="100%"
      @scroll="onScroll"
    />
  </view>
</template>

<script>
  import { markRaw } from 'vue'
  import Row from './ListRow.vue'

  function buildData(offset = 0) {
    return Array(100)
      .fill(0)
      .map((_, i) => i + offset)
  }

  export default {
    data() {
      return {
        Row: markRaw(Row),
        list: buildData(0),
        loading: false,
        itemHeight: 100,
        column: 2
      }
    },
    computed: {
      dataLen() {
        return this.list.length
      },
    },
    methods: {
      listReachBottom() {
        Taro.showLoading()
        this.loading = true
        setTimeout(() => {
          const { data } = this.state
          this.setState(
            {
              data: data.concat(buildData(data.length)),
            },
            () => {
              this.loading = false
              Taro.hideLoading()
            }
          )
        }, 1000)
      },
      onScroll({ scrollDirection, scrollOffset }) {
        if (
          // 避免重复加载数据
          !this.loading &&
          // 只有往前滚动我们才触发
          scrollDirection === 'forward' &&
          // 5 = (列表高度 / 单项列表高度)
          // 100 = 滚动提前加载量，可根据样式情况调整
          scrollOffset > (this.dataLen - 5) * this.itemHeight + 100
        ) {
          this.listReachBottom()
        }
      },
    },
  }
</script>

<style scoped>

</style>

ListRow.vue

<template>
  <view :id="id">
    <view>Row {{ data[index] }}</view>
  </view>
</template>

<script>
  export default {
    props: ['id', 'index', 'data']
  }
</script>

环境信息

vue版本 3.5.17

👽 Taro v3.6.32

APP_VERSION 6.3.17
process.env.MINI_ENV undefined
isExt: false

  Taro CLI 3.6.32 environment info:
    System:
      OS: macOS 13.2.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
      npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.32 => 3.6.32 
      @tarojs/components: 3.6.32 => 3.6.32 
      @tarojs/plugin-framework-vue3: 3.6.32 => 3.6.32 
      @tarojs/plugin-html: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-weapp: 3.6.32 => 3.6.32 
      @tarojs/runtime: 3.6.32 => 3.6.32 
      @tarojs/taro: 3.6.32 => 3.6.32 
      @tarojs/webpack5-runner: 3.6.32 => 3.6.32 
      babel-preset-taro: 3.6.32 => 3.6.32

贡献代码

• 我愿意修复这个错误