8***@qq.com
8***@qq.com
  • 发布:2024-10-17 13:56
  • 更新:2024-10-18 15:11
  • 阅读:71

【报Bug】v-model指令的bug

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: WIN10

HBuilderX类型: 正式

HBuilderX版本号: 4.24

手机系统: Android

手机系统版本号: Android 7.1.1

手机厂商: 杂牌PDA

手机机型: PDA

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

在低配置的PDA中加载一个表格页面,且表格列和行较多(列>5,行>10)的情况下,随便找个输入框快速输入,输入框的值就会异常

预期结果:

在低配置设备使用v-model指令时输入正常

实际结果:

例如快速输入123,屏幕会依次显示123 -> 1 ->123,输入框用的是原生组件input

bug描述:

低配置设备的输入框输入异常,快速输入时,界面渲染延迟,渲染线程与js线程冲突

不使用v-model就没有这个问题,应该是v-model的数据回流导致这个bug(配置好点的设备,例如手机,没有这个问题)

目前公司的App使用了v-model的输入框都有影响,希望官方早日修复

2024-10-17 13:56 负责人:无 分享
已邀请:
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

感谢反馈,你提到部分pda 设备处理数据处理会有问题,经过你测试拆分为 input 和 value 是否可以绕过这个问题?

  • 8***@qq.com (作者)

    你稍等,我详细测试之后再反馈给你,尽量排除自身代码的问题

    2024-10-18 13:55

  • 8***@qq.com (作者)

    已经更新,我感觉是性能优化问题,按照你们文档的说法,渲染层和逻辑层分离导致的,这个能解决更好,不能的话只能放弃在弹窗内使用v-model了

    2024-10-18 15:13

8***@qq.com

8***@qq.com (作者) -

页面主要有2个元素:表格和弹窗,以弹窗的形式对表格数据进行编辑,具体交互为:点击单元格展示弹窗,弹窗里面带输入框,输入新的值进行回传后台

1.如果表格数据稍多,弹窗内的输入框使用v-model,则输入问题异常严重
2.同样使用v-model,非弹窗输入框情况好很多,但是也有
3.不使用v-model,改使用:value="Amount",输入框输入没有问题
4.不使用v-model,改使用:value="Amount",且监听input事件将最新值同步到Amount,则输入问题异常严重,比1还严重

  • DCloud_UNI_OttoJi

    这个问题看起来是性能导致的,考虑到你是 andorid 到 pda,你参考 renderjs 尝试解决下,保底的话你可能需要想额外的方案了

    2024-10-18 16:20

  • 8***@qq.com (作者)

    回复 DCloud_UNI_OttoJi: 我目前已经找个方案解决,放弃弹窗中的v-model,弹窗确认时使用refs进行读取,非弹窗v-model性能影响没那么大先忽略。现在问题是避开了,但是没有从根上解决,毕竟不可能整个应用放弃v-model指令。框架的双向数据绑定在这个场景下确实有性能问题的,希望后续版本你们能从根上解决吧

    2024-10-18 17:16

  • DCloud_UNI_OttoJi

    回复 8***@qq.com: 我推荐的 renderjs 你试一下,我手里没有 pda 设备没法复现你到问题。使用也很简单,看一下文档就行

    2024-10-18 17:35

  • 8***@qq.com (作者)

    回复 DCloud_UNI_OttoJi: 我抽空试试吧

    2024-10-18 17:39

要回复问题请先登录注册