在Vue3中使用VirtualWaterfall报Maximum recursive updates exceeded错误

[magixsource]

相关平台

微信小程序

复现仓库

https://github.com/magixsource/icycling-web.git 小程序基础库: 3.3.5 使用框架: Vue 3

复现步骤

在基于官方脚手架，选择vue3-NutUI4模板，初始化项目后。按照官方文档https://docs.taro.zone/en/docs/virtual-waterfall 的指示，在app.js中注册waterfall组件。然后在index.vue页面中的template部分，填入

    <virtual-waterfall
        class="List"
        :height="500"
        :item-data="state.list"
        :item-count="10"
        :item-size="100"
        :item="Row"
        width="100%"
      /> 

在script部分填入

  <script setup>
            import { ref,reactive,onMounted,markRaw } from 'vue';
            import Taro from '@tarojs/taro'
            import { GET } from '../../http/http'
            import Row from './row.vue'

      const state = reactive({
          keyword: '',
          page: -1,
          size: 20,
          lastSize: 0,
          list: [],
        });

  onMounted(() => {
      const params = {}
      params.page = state.page   1;
      params.size = state.size;
      params.sort = "id,desc";

      GET({
        params: params,
        url: '/api/demo/article/list',
        success: function (res) {
          state.list = state.list.concat(res.data);
          state.page = state.page   1;
          state.lastSize = res.data.length;
        },
        fail: function () {
        }
      });
    });

  </script>

期望结果

如官方示例一般，显示文章瀑布样式

实际结果

WAServiceMainContext.js?t=wechat&s=1711929485293&v=3.3.5:1 Error: MiniProgramError
"Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function."
    at Object.errorReport (WAServiceMainContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at Function.thirdErrorReport (WAServiceMainContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at Object.thirdErrorReport (WAServiceMainContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at i (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at Object.cb (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at q._privEmit (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at q.emit (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1
    at n (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at je (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)(env: macOS,mp,1.06.2306020; lib: 3.3.5)

环境信息

Taro v3.6.25

  Taro CLI 3.6.25 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.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.25 => 3.6.25 
      @tarojs/components: 3.6.25 => 3.6.25 
      @tarojs/helper: 3.6.25 => 3.6.25 
      @tarojs/plugin-framework-vue3: 3.6.25 => 3.6.25 
      @tarojs/plugin-html: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-alipay: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-h5: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-jd: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-qq: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-swan: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-tt: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-weapp: 3.6.25 => 3.6.25 
      @tarojs/runtime: 3.6.25 => 3.6.25 
      @tarojs/shared: 3.6.25 => 3.6.25 
      @tarojs/taro: 3.6.25 => 3.6.25 
      @tarojs/taro-loader: 3.6.25 => 3.6.25 
      @tarojs/webpack5-runner: 3.6.25 => 3.6.25 
      babel-preset-taro: 3.6.25 => 3.6.25 
      eslint-config-taro: 3.6.25 => 3.6.25

[magixsource]

我试过将组件换成List，则不会有这个问题。 同时，如果我将state.defaultList换成静态的集合，也不会有问题

[NVO-2021]

确实 我也遇到了类似的问题，期待解决。