Формы в Vue
Вы чрезмерно дорабатываете свои формы Vue
Как быстро создавать компоненты чистой формы
Практически каждое приложение содержит какую-то форму. Независимо от того, создаете ли вы приложение-задачу, чат-бота или следующий клон-клуб, вам, скорее всего, понадобится создать хотя бы один вид.
Одним из основных преимуществ Vue является его реактивность и система привязки данных. Если вы работали с ним раньше, то наверняка сталкивались с v-model и другими вариантами привязки данных к элементам шаблона или дочерним компонентам.
Это также обычно первое, что приходит в голову при создании новой формы.
«Просто добавьте несколько тегов ввода и наложите на каждую v-модель». - ничего не подозревающий разработчик
v-model великолепен и занимает свое (заслуженное) место во многих компонентах Vue.
Но, как это часто бывает в программировании, обычно есть другие решения, которые необходимо рассмотреть. Иногда эти другие решения лучше подходят для конкретных случаев использования.
Итак, давайте посмотрим, как мы можем выровнять наши формы и тратить больше времени на кодирование вещей, которые на самом деле требуют умственных способностей.
Проблема с v-моделью
Использование v-model требует затрат.
Когда вы используете v-model в компонентах формы, вы двусторонне привязываете данные из компонентов к некоторым тегам ввода или дочерним компонентам внутри формы. Для этого вам необходимо добавить атрибут к каждому тегу, который вы хотите использовать в шаблоне.
Возьмем простую форму входа:
Наша функция login может выглядеть примерно так:
Этот код хорош, но ввод v-model для каждого тега может очень быстро стать избыточным. Представьте себе страницу регистрации для чего-то более сложного, например, приложения FinTech. Возможно, вам потребуется собрать данные о финансовой экспертизе, истории и ситуации пользователя.
Это может быстро привести к созданию длинных форм с множеством различных типов входных данных.
Вы можете сказать, что с этим легко справиться с помощью v-for, и будете правы - в определенной степени.
Если у вас есть только набор текстовых полей, с вами, вероятно, все в порядке.
Но что, если у вас есть разные типы ввода, какой-то текст, какой-то номер и поле пароль?
Теперь добавьте необходимость в различных тегах, таких как textarea или настраиваемые дочерние компоненты. В конечном итоге вы передаете inputs массив объектов в качестве опоры компоненту FormFields и используете кучу сложной логики и / или слотов для создания излишне спроектированной версии того, что вы изначально только что напечатали. в шаблоне.
Но, по крайней мере, теперь он многоразовый, не так ли?
Недостаток этой архитектуры становится еще более серьезным, если вы вспомните, для чего вообще нужен v-model.
Вот первое предложение о v-model из документации Vue:
Вы можете использовать директиву v-model для создания двусторонних привязок данных при вводе формы, текстовом поле и выбранных элементах.
Он используется для двусторонней привязки данных. Но вам не нужна двусторонняя привязка данных в формах входа, формах регистрации или финансовых анкетах!
Пользователь вводит данные, отправляет их и все.
Во многих случаях вам просто не нужен компонент, чтобы иметь возможность обновлять данные во входных данных.
Использование Object.fromEntries
Один из способов обработки представленных материалов - использовать Object.prototype.fromEntries в FormData соответствующей формы.
Подумайте о форме входа в систему из предыдущего примера. Другой способ заставить его работать - это полностью испустить любые v-model и v-on:click обработчики и просто полагаться на старые добрые формы JavaScript для выполнения этой работы.
Если вам нужно немного вспомнить, почему это работает, button тегам в form тегах, не имеющих указанного атрибута type, присваивается тип submit, и при нажатии на них запускается событие родительских form тегов submit. Затем событие submit вызывает функцию входа в систему с объектом Event, содержащим свойство target, относящееся к элементу формы.
Давайте взглянем на нашу блестящую новую функцию login.
Здесь мы передаем элемент формы конструктору FormData, который возвращает набор пар ключ / значение, представляющих поля формы и их значения (https://developer.mozilla.org/en-US/docs/ Web / API / FormData , MDN).
Затем мы передаем возвращаемое значение из new FormData конструктора в Object.fromEntries, чтобы превратить наш FormData в Object.
Поскольку теперь у нас есть значения, доступные в виде простых свойств объекта, мы можем перейти к получению нужных нам значений с помощью деструктуризации и простой передачи соответствующих значений в функцию loginWithUsernameAndPassword.
Этот метод не создает двусторонней привязки и поэтому просто работает, создавая шаблон и извлекая значения в функции входа в систему.
Предостережения
Имейте в виду, что, поскольку этот метод не создает двусторонней привязки, все введенные пользователем значения будут потеряны при повторной визуализации компонента. Если вы используете этот метод, не привязывайте какие-либо элементы внутри компонента, используя реактивные свойства, такие как v-модель. Каждое событие обновления, генерируемое входом, содержащим v-model, будет вызывать повторную визуализацию компонента, очищая все нереактивные поля ввода.
Последние мысли
Формы - очень распространенный тип компонентов. Несмотря на то, что разработчики используют их очень часто, люди редко тратят время на оптимизацию своих рабочих процессов с формами, даже если это может иметь огромное значение в удобочитаемости, а также во времени и опыте разработки.
Надеюсь, вам понравилась эта небольшая статья о методе, который я полюбил и уже применял в нескольких проектах промышленного уровня.
Если у вас есть другой подход к созданию чистых и эффективных форм во Vue, я хотел бы услышать о них в комментариях!
Больше контента на plainenglish.io
