uni-app nvue 渲染列表速度慢 切换数据时出现明显的回收旧数据过程 耗时长

uni-app nvue 渲染列表速度慢 切换数据时出现明显的回收旧数据过程 耗时长

11 回复

还有个问题，应该还是类似的，nvue list 循环cell ,onshow里写重新加载接口渲染数据，当数据加载分页的时候，点击跳出页面，再回来触发onShow的时候，页面卡死 直接app崩溃跳出

更多关于uni-app nvue 渲染列表速度慢 切换数据时出现明显的回收旧数据过程 耗时长的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还有此次更新完之后。flex-direction为row,一个父元素包含两个子元素，如果其中一个子元素文字比较多，会分两行显示，父元素上写上flex-wrap:nowrap;样式，整个无法再折行

这里还必须指定一个宽度才行

https://v.youku.com/v_show/id_XNTgxNTMyOTg2MA==.html

https://v.youku.com/v_show/id_XNTgxNTMyOTg2MA==.html 这个是那个bug的录频

没有人有这个问题吗，以前的版本都没问题，就最近更新的几个版本之后，特别诡异！

在页面渲染回收旧数据期间。什么都点不了，我如果点击返回，是要等这个过程处理完，才会去触发返回

在manifest.json中改成 “nvueStyleCompiler” : “weex” 就不会有这个问题

升级到 3.2.12 正式版
点击筛选后，先执行滚动到list顶部，再查询，效果会好很多，目前推测是 cell 自动回收机制阻塞
我项目是纯 nvue，基本都是list cell，目前测试看安卓已经好很多了

await scrollToRef(this.$refs.top, 0, false) // 跳至顶部，无动画
this.onFetch(filter) // 执行筛选 const dom = weex.requireModule(‘dom’)

/**

  • 让页面滚动到 ref 对应的组件
  • @param {object} ref - 节点引用
  • @param {number} offset - 到其可见位置的偏移距离，默认是 0
  • @param {boolean} animated - 是否执行动画，默认是 true
    */
    export async function scrollToRef(ref, offset = 0, animated = true) {
    try {
    dom.scrollToElement(ref, { offset, animated });
    await sleep(25) // 等待25ms，经验值，避免安卓下异常
    } catch (e) { }
    }

/**

  • 休眠一段时间
  • @param {number}} ms 毫秒数
    */
    export function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
    }

你好这个问题有解决么

在nvue中，列表渲染性能主要受以下因素影响：

  1. 列表数据结构：建议使用扁平化数据结构，避免嵌套过深。对于长列表，使用<recycle-list>组件（需启用V8引擎）能显著提升性能，它通过复用节点减少创建销毁开销。

  2. 数据切换优化：出现回收耗时通常是因为一次性渲染大量节点。可尝试：

    • 分页加载数据，避免同时渲染过多条目
    • 使用v-if替代v-show控制列表显隐
    • 切换数据前先清空数组再赋值，而非直接覆盖

  3. 节点简化：减少列表项内的嵌套层级和组件数量，复杂样式尽量使用CSS类而非行内样式。图片加载建议使用<image>的lazy-load属性。

  4. 关键配置：

    <list scroll-y enable-back-to-top>
  <cell v-for="item in list" :key="item.id">
    <!-- 简化内容 -->
  </cell>
</list>
回到顶部