Vue使用v-model绑定iView textarea 聊天列表增长导致输入极度卡顿如何解决

问题根源 #

输入事件触发了不必要的全组件重渲染，长聊天列表的同步重绘成本随列表长度线性增长，与textarea本身的输入逻辑无关，v-model.lazy只能减少更新频率，无法解决重渲染的核心问题。

解决方案 #

• 拆分响应式状态，避免输入值联动列表渲染
  不要将输入框绑定值嵌套在和聊天列表相关的响应式对象chatObj中，单独声明局部变量存储输入内容，仅在发送消息时同步到chatObj，切断输入动作和聊天列表的响应式依赖：

<!-- 替换原有v-model绑定 -->
<Input 
  @on-enter="sendMsg" 
  class="_chatBox_textarea_textarea" 
  :value="inputMsg"
  @input="handleInput"
  :autosize="{minRows: 1,maxRows: 5}" 
  type="textarea" 
  placeholder="Write a message..."
>
</Input>

export default {
  data() {
    return {
      // 单独声明输入变量，不与聊天列表的响应式逻辑耦合
      inputMsg: ''
    }
  },
  methods: {
    handleInput(val) {
      this.inputMsg = val
    },
    sendMsg() {
      this.chatObj.msg = this.inputMsg
      // 原有发送逻辑
      this.inputMsg = ''
    }
  }
}

• 优化聊天列表渲染性能
  这是解决长列表下卡顿的核心手段：

  • 所有聊天项必须绑定唯一key，禁止使用数组索引作为key，减少列表重渲染时的DOM diff成本
  • 接入虚拟滚动组件，仅渲染可视区域内的聊天项，无论列表总长度多少，始终只渲染10-20条DOM节点，彻底抹平长列表重绘成本，可直接使用iView内置的VirtualList组件实现
  • 对发送后不会修改的聊天项添加v-once标识，避免无关更新触发重绘

• 降低输入动作的更新频率
  如果拆分状态后仍有卡顿，可对输入事件添加防抖，避免高频输入频繁触发响应式更新：

// 防抖工具函数
const debounce = (fn, delay = 150) => {
  let timer = null
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

// 改写handleInput
methods: {
  handleInput: debounce(function(val) {
    this.inputMsg = val
  })
}

• 优化autosize逻辑
  iView内置的autosize会在每次输入时同步计算文本框高度，可关闭内置autosize，自行实现防抖版的高度计算逻辑，进一步降低输入时的计算成本。

内容的提问来源于stack exchange，提问作者Hkm Sadek