Vue падает при связывании ввода с большими строками

Question

У меня есть этот вход, связанный со свойством:

// in the template
<input type="text" v-model="someProp">

// in the script
export default {
  data() { return {
    someProp: ''
  }
}

Проблема заключается в том, что этот вход будет связан с очень длинной строкой (длиной 21 тыс. Символов).При копировании / вставке строки во ввод вкладка временно вылетает следующим образом:

• Невозможно прокрутить
• Текстовый курсор перестает мигать
• Окно зависает
• Появляются компоненты, которые не должны отображаться

Кажется, что есть некоторая чрезмерная обработка при связывании с большими входами.Что я могу изменить в своем коде, чтобы предотвратить задержку?

И, если возможно: это переобработка из-за Vue или браузера?

Answer 1

Видимо, некоторые браузеры оптимизируют ввод большого текста только для элементов textarea, но не для input.Выполнение следующего изменения в моем шаблоне предотвратило отставание вкладки:

// change this
<input type="text" v-model="someProp">
// to this
<textarea type="text" v-model="someProp"></textarea>

(с некоторыми дополнительными стилями, конечно).

Кажется, проблема связана с браузером, а не с Vue, но это все, что я могу сказать - дополнительная информация будет принята с благодарностью!