v-model — это синтаксический сахар, предоставляемый vue.js, который прослушивает различные события в соответствии с различными элементами управления формой и реализует двустороннюю привязку данных элементов управления формы. когда контроль есть<input>При входе в ящик v-model прослушивает событие ввода. Как показано ниже, есть ли разница между этими двумя способами записи?
<input :value="name" @input="name = $event.target.value">
<input v-model="name">
Проблема с форматированием ввода на китайском языке
Общие требования к форме ввода: да<input>Входное содержимое элемента управления форматируется, например, преобразуется в прописные буквы. Если входное значение содержит китайский язык, форматирование вызовет исключение для метода ввода. Теперь используйте два вышеуказанных метода записи для достижения цели, пример выглядит следующим образом:
Используйте :значение, @input-Исключение метода ввода, как показано на рисунке ниже, вы также можетепопробуй онлайн:
Используйте директиву v-model -метод ввода нормальный, как показано на рисунке ниже, вы также можетепопробуй онлайн:
Из вопроса выше видно, что v-model не просто присваивает значения переменным, так что же еще она делает?
анализ исходного кода v-модели
Глядя на исходный код v-model, вы можете видеть, что v-model по-прежнему беспокоитвходное событие:
привязка входного событиякод обратного вызоваобработки следующим образом:
Как вы можете видеть здесь, v-model оценивает составляющее свойство, и когда комбинация методов ввода не закончена, она возвращается напрямую, не присваивая значение.
составление собственностиЭто не стандартный атрибут элемента dom, так как же он появился?
Здесь видно, что атрибут композиции добавляется к узлу dom с помощью vue.js.
Итак, где же вызываются эти две функции? Как видите, когда узел dom вставлен, vue.js слушаеткомпозицияначало / композицияконец события:
Compositionstart/compositionend Эти два события являются собственными DOM.Чтобы узнать о проблемах с совместимостью браузера, обратитесь к описанию MDN:
Исходный код также находится вОбновлять ли значение атрибута dom, также используется свойство композиции:
Здесь видно, что в процессе комбинирования методов ввода обновление значения переменной vue.js не будет синхронизировано с атрибутом value элемента dom.
- v-model на самом деле прослушивает три события ввода, CompositionStart и CompositionEnd элемента управления и напрямую не возвращает никакого присваивания во время комбинации метода ввода.
- Директива v-model задает компоновку переменной, которая также используется для определения необходимости обновления атрибута value элемента dom.
событие ввода v-model, вызванное китайским языком
Из приведенного выше анализа исходного кода видно, что привязка v-модели<input>При вводе китайского языка фактически активируются следующие события:
Compositionstart => 3 input => CompositionEnd события, это<input>Сработал контроль. Последнее событие ввода запускается vue.js в обратном вызове onCompositionEnd, который виден в исходном коде.
1. событие запуска композиции
Измените свойство композиции объекта dom на true
2, 3 входных события
Поскольку свойство компоновки объекта dom имеет значение true, ему не будет присвоено значение, и оно будет возвращено напрямую.
3. составное событие
Измените свойство композиции объекта dom на false
4. Событие ввода, вызванное vue.js
Поскольку свойства DOM сочинительства объекта является ложным, назначают, измените значение соответствующей переменной.
Анализ проблемы форматирования
Посмотрите еще раз на пример в начале статьи: если вы используете команду v-model для реализации двусторонней привязки данных, то не будет исключения метода ввода, как показано на рисунке ниже, или вы можетепопробуй онлайн:
- Директива v-model устанавливает переменную composing.Хотя код изменяет значение this.name в функции форматирования, флаг компоновки предотвращает синхронизацию значения this.name со свойством value элемента ввода.
- Если вам интересно, вы можете изменить исходный код vue.js и удалить оценку составного атрибута в функции shouldUpdateValue.Вы можете видеть, что метод ввода ненормальный, как и раньше.
Исправление проблемы с форматированием
Снова взглянув на пример в начале статьи, если вы используете :value, @input для реализации двусторонней привязки данных, есть три решения проблемы исключений китайского ввода.
Вариант 1: вместо этого используйте v-модель
v-model имеет дело с проблемой сочетания методов ввода на китайском языке, просто используйте его напрямую, как показано ниже, вы также можетепопробуй онлайн:
Вариант 2: Слушайте событие Изменить
После завершения ввода и потери фокуса вызовите метод форматирования, как показано ниже, или вы можетепопробуй онлайн:
Вариант 3. Отслеживайте событие ввода и одновременно оценивайте процесс комбинирования методов ввода.
В процессе комбинирования методов ввода форматирование не выполняется, как показано ниже, или вы можетепопробуй онлайн: