Я использовал разные фреймворки, но до недавнего времени не использовал Vue.js. Мой друг рассказал мне о Vue.js и посоветовал мне попробовать. Когда я начал использовать Vue.js, я столкнулся с несколькими проблемами, проблемами, проблемами и даже сделал много ошибок на своем пути. Итак, я решил поделиться своим опытом с другими, чтобы другим разработчикам не пришлось проходить через те же испытания, что и я.

Vue.js

Если вы не знакомы с Vue.js, то Vue - это в основном фреймворк для разработки пользовательских интерфейсов. Что отличает его от других фреймворков, так это то, что он разработан с учетом постепенной адаптации. Даже основная библиотека ориентирована на слой представления, но ее можно легко интегрировать с другими библиотеками.

Кроме того, фреймворк Vue достаточно мощный, чтобы обрабатывать одностраничные приложения, если вы комбинируете его с современными инструментами и вспомогательными библиотеками. Давайте посмотрим на некоторые плюсы и минусы Vue.js, чтобы дать вам лучшее представление.

Плюсы и минусы Vue.js

Плюсы:

Читаемость
Документация
Реактивность
Размер
Гибкость

Минусы:

Маленькое сообщество

К сожалению, большинство разработчиков не используют весь потенциал Vue.js, потому что они не следуют лучшим практикам Vue.js и допускают типичные ошибки.

В этой статье вы узнаете о семи ошибках vue.js, которые разработчики никогда не должны допускать при работе с vue.js.

1. Добавление компилятора шаблонов

У меня не заняло много времени столкнуться с моей первой проблемой с Vue.js. Когда я пытался импортировать его, я заметил, что встроенный шаблон для вашего компонента возвращает пустую страницу, даже если вы следуете инструкциям, приведенным в официальном руководстве. Когда я пытался определить шаблоны с помощью функции рендеринга или как отдельный файловый компонент, этих проблем не возникало. Это могло произойти из-за разницы в сборках, поскольку у vue много разных сборок. Сборка по умолчанию, экспортируемая пакетом NPM, обычно является сборкой только времени выполнения, которая не включает компилятор шаблона.

Если вы знакомы с JSX для React, кривой обучения не будет, поскольку компиляторы шаблонов работают так же, как JSX для React. Что он делает, так это то, что он только заменяет строки шаблона вызовами функций для создания виртуального узла DOM. Одна из основных причин, по которой эта проблема не возникает в отдельных файловых компонентах, заключается в том, что SFC используют инструменты vue-loader и vueify. Оба этих инструмента генерируют простой компонент JavaScript, используя функцию рендеринга для определения шаблона. Чтобы решить эту проблему, все, что вам нужно сделать, это указать правильную сборку во время импорта. Вы также можете решить эту проблему, создав псевдоним для Vue в конфигурации вашего сборщика.

2. Поддержание реактивности свойства

Пользователи React знакомы с концепцией реактивности. Он работает путем вызова функции setState. Эта функция обновляет значение в свойствах. Несмотря на то, что это одно из самых больших преимуществ vue.js, в Vue он работает немного иначе, чем в React. Во Vue он проксирует свойства компонента. Функции получения и установки используются для переопределения, а обновления доставляются в виртуальной DOM.

Вот фрагмент кода, объясняющий это.

var vm = new Vue ({
el: '#vm',
template: `‹div› {{item.count}}‹ input type = ”button” value = ”Click” @click =” UpdateCount ”/› ‹/div› `,
data: {
item: {}
},
beforeMount () {
this. $ Data .item.count = 0;
},
методы: {
updateCount () {
// объект JavaScript обновлен, но
// шаблон компонента не обработано снова
this. $ data.item.count ++;
}
}
});

В этом примере вы можете ясно видеть, что экземпляр Vue имеет свойство под названием item, которое содержит пустой объект. Когда компоненты инициализируются, Vue создает прокси с функциями получения и установки, связанными со свойством item. Благодаря этому фреймворки отслеживают колебания стоимости и соответствующим образом реагируют.

3. Экспорт компонентов в один файл

Хотя в использовании Vue в файлах JavaScript нет ничего плохого, это может усложнить задачу. Более простым методом было бы использование компонентов одного файла, поскольку он может собрать весь код HTML, CSS и JavaScript в одном файле.

В случае компонентов с одним файлом код компонента обычно находится в теге скрипта внутри файла Vue. Несмотря на то, что код будет написан на JavaScript, вам все равно придется экспортировать компонент. Есть несколько способов сделать это. Три из них следующие:

Прямой экспорт
Именованный экспорт
Экспорт по умолчанию

Если вы выберете опцию именованного экспорта, вы не сможете переименовать компоненты. Это означает, что он также будет подвержен тряске дерева. Что еще более важно, именованный экспорт несовместим с отдельными файловыми компонентами. Лучше использовать метод экспорта по умолчанию, чем именованный метод экспорта.

4. Избегайте объединения компонентов из одного файла

Однофайловые компоненты могут упростить процесс разработки, поскольку они позволяют разработчикам добавлять код, шаблон и стили в один файл. Также важно сохранить разделение, иначе оно может быстро испортиться. Также существует риск того, что импортированные SFC переопределят предыдущие SFC, поэтому вам нужно проявлять особую осторожность при объединении SFC. Самым большим недостатком SFC является то, что вы не можете импортировать их в несколько компонентов Vue.

5. Обновление родительских данных из дочернего компонента

В Vue.js родители передают данные дочернему компоненту с помощью свойств, а ребенок отвечает или отправляет сообщение с помощью событий. Эти отношения также можно назвать опорой вниз и событием вверх. Вот фрагмент кода, который показывает, как передавать реквизиты дочернему элементу.

‹Div›
‹input v-model =” parentMsg ”›
‹br›
‹дочерний v-bind: my-message =” parentMsg ”› ‹/child›
‹/Div›

6. Отображение обещаний от действий Vuex

Поскольку действия в Vuex асинхронны, единственный способ сообщить вызывающей функции, завершено действие или нет. Он возвращает обещание и разрешает его позже. Он выполняет HTTP-вызов, а затем одно за другим разрешает и отклоняет обещание.

7. Совместное использование Vue.js и jQuery

Если вы хотите использовать фреймворк Vue вместе с другими инструментами для работы с DOM, такими как jQuery, вам придется отделить его. Вы можете использовать jQuery для управления виджетом DOM или использовать Vue, но не то и другое одновременно. Компонент-оболочка действует как связующее звено между Vue, компонентами и внутренними элементами DOM. Это позволяет Vue взаимодействовать с компонентами, и компоненты будут использоваться для управления внутренними элементами DOM через jQuery.

Если вы используете фреймворк Vue.js для разработки решений для разработки приложений или создания веб-приложений, вам следует избегать этих ошибок. Какая самая большая ошибка, которую вы когда-либо совершали с vue.js? Дайте нам знать в комментариях ниже.