小程序input输入框输入和删除时闪烁的问题

问题描述

当小程序的input输入框输入过快或连续删除时，会出现数值不准、回退和闪烁的问题

问题代码

第一次尝试

将v-model双向绑定替换成用value操控初始值，失焦的时候更新数据的方式。未解决问题

第二次尝试

通过id直接操纵元素的方式赋默认值，input值改变（input事件）的时候更新数据。问题减轻但没有解决

第三次尝试

自定义滚动选择器弹出时，问题明显，推断是页面元素和数据过多导致卡顿，通过v-if在不需要用到滚动选择器的时候进行隐藏。问题减轻但没有解决

最终尝试

将第二次尝试和第三次尝试的结果进行合并。问题解决

实现代码

//挂载前将初始值赋值给input
document.getElementById(inputId).value = data.dataInput;
// 更新数据
function updateValue(e) {
  let value = e.detail.value;
  setTimeout(() => {
      context.emit('input' ,value);
  }, 0)
}
//不使用的时候不进行渲染