Отказ от ответственности: я ни в коем случае не эксперт по Javascript, я разработчик полного цикла, который зарабатывает себе на хлеб, используя Laravel + Vue, а иногда (неохотно) jQuery. Я знаю много вещей, которых я не знаю, но я также знаю, что для разработчиков полного стека нам просто нужно знать достаточно, чтобы быть опасными и выполнять свою работу, то есть выполнять задачи, которые наша компания / клиенты ставят перед нами.
Нам не нужно знать каждую внутреннюю деталь, у кого есть на это время? Возможно, если бы мы работали в компании, которая дала нам 20% скидку на самообучение. Если у вас есть предложения или вопросы, чтобы сделать это лучше, дайте мне знать, или если я что-то напортачил или что-то изменилось, чего никогда не бывает в разработке, я прав?
Меня нанимают. Если вы знаете кого-нибудь, кому нужен разработчик полного стека с 8-летним опытом использования laravel, 2+ годами на Vue, пришлите их мне! В настоящее время я изучаю GraphQL (Hasura) и React Native Web, пытаясь заменить backend на схему базы данных postgres для быстрой разработки. Резюме | Github | "Эл. адрес"
Совет №1: вложенные объекты НЕ являются реактивными (по умолчанию).
Этот метод выглядит так, как будто он должен работать, скажем, у вас есть вход, который соответствует somevar.level1.level2.level3, если вы запустите этот метод, он не обновит модель. Вместо этого вам нужно использовать Vue.set или в SPC (одностраничный компонент) вы просто используете this. $ Set. См. Синтаксис ниже:
Совет № 2: изучите и используйте Vuex с самого начала
Это может привести к пламенной войне, некоторые поклонники Vue посоветуют вам начать с шины событий и продвигаться вверх, но Vuex достаточно модульный, чтобы вы могли использовать его как в малых, так и в больших приложениях. Если вы создаете одностраничное приложение, у вас нет шансов получить удовольствие без Vuex, вы будете пытаться реализовать многие из тех же функций в своей шине событий и заставлять любого другого разработчика, работающего над проектом, жизнь сущий ад.
Хороший учебник по vuex можно найти здесь: WTF - это Vuex? Руководство для новичков по хранилищу данных приложений Vue
Кто-то упомянул, что мне нужно подробнее рассказать об этом, так что вот мое мнение.
Что такое Vuex?
Vuex - это, по сути, единственный источник достоверных данных. Например, если вы создаете одностраничное приложение, у вас может быть список пользователей или рецептов, и этот список может обновляться различными сценариями, например добавлением нового рецепта и получением обновленного списка. Отслеживание изменений на нескольких вкладках и / или страницах может стать сложным, особенно если обновления не выполняются (когда в приложение изначально загружается много данных).
Vuex делает так, что каждый раз, когда что-то обновляется, вы можете обновлять его в основном месте, в основном данные являются центральными для всего остального, что происходит на странице.
Есть два других способа сделать это, один - шина событий. Шина событий - это, по сути, отдельный экземпляр Vue, которому все остальные компоненты передают сообщения туда и обратно. Это в основном уведомляет их об изменениях, а затем ваши компоненты прослушивают изменения на этой шине и действуют соответственно, когда инициируется событие, которое влияет на них.
Он работает достаточно хорошо, но может стать трудным в управлении, и я обнаружил, что стараюсь быть умным с автобусами событий, и к концу проекта я полностью заменил его на vuex.
Итак, вот мой взгляд на то, что и почему вы хотите использовать vuex, я не буду вдаваться в подробности, как реализовать хранилище Vuex, но я скажу, что вы также можете изучить один из имеющихся там модулей vuex-persistence, это сохранит ваше состояние, если страница обновится, отключится или что-то еще. Он просто сохраняет все в локальное хранилище.
Совет №3: Если сомневаетесь, сделайте рендеринг заново.
Вот простой пример использования, допустим, у вас есть всплывающая форма заказа. Если по какой-то причине пользователь закрывает форму заказа и снова открывает ее, вы можете обнаружить, что некоторые поля не позволяют редактировать, или в них есть устаревшие данные, или если вы запускаете всплывающее окно через поле выбора, оно может работать неправильно. Честно говоря, это большая головная боль.
Один из приемов - повторно отрисовать ваши компоненты. Самый простой способ, который я нашел для этого, - это когда модальный или какой-либо другой компонент зарегистрирован в DOM, передайте ему ключ или при монтировании заставляйте его генерировать случайный. Хорошим ключом может быть просто создание метки времени в формате UTC и ее использование, поскольку в большинстве случаев она будет уникальной, или вы можете просто иметь ключ, который автоматически увеличивается при каждом вызове через компьютер или наблюдатель.
Ключ сообщает Vue, что это НОВЫЙ экземпляр, забудьте о старом, удалите и повторно захватите все данные, связанные с ним, и давайте повторно отрендерим, если какие-то данные все еще контролируют вещи.
Совет №4. Не используйте наблюдателя, пока не сможете подробно объяснить разницу между наблюдателем и вычисляемым свойством.
Наблюдатели и вычисляемые реквизиты очень важны и необходимы в обычном рабочем процессе разработчиков Vue.js, но если вы воспользуетесь ими неправильно, у вас возникнут головные боли.
В девяти случаях из десяти вычисленное свойство - это то, что вы ДЕЙСТВИТЕЛЬНО хотите, и если вы не уверены, вам, вероятно, следует попытаться разработать способ создания вычисляемого свойства вместо наблюдателя.
Совет № 5: узнайте разницу между реквизитом и данными.
По сути, опора - это данные, которые вы передаете В компонент из родительского компонента или при первой инициализации корневого компонента.
Данные - это реактивные свойства, определенные для экземпляра. Я считаю, что это хорошая практика, если вы когда-нибудь думаете, что вам нужно обновить значение или повторно использовать его для создания нового значения при монтировании, которое является дубликатом опоры. Скажем, у вас есть свойство под названием colorProp, у вас может быть значение в данных, называемое просто цветом, тогда в вашем методе mount () установите this.color на colorProp.
Совет № 6: составьте план загрузки элементов.
Вы можете начать с того, что позволите пользователям ждать, не зная, что происходит, но это быстро испортится. Особенно, когда вы добавляете Vuex и несколько точек данных в микс. Лучше всего иметь единую глобальную настройку «загрузчик», которая запускается всякий раз, когда обновляется глобальное свойство «загрузка» из Vuex. Таким образом, вы всегда можете правильно переключить его и обязательно выключить.
Однако есть одно предостережение - убедитесь, что вы отловили все ошибки, особенно при использовании аксиомов и обещаний, и обязательно завершите загрузочное сообщение об ошибках, чтобы пользователи могли вернуться, исправить что-то и повторно отправить форму.
Совет № 7. Используйте фильтры для общих методов форматирования.
См. Пример ниже:
Приведенный выше пример отлично подходит для чего-то небольшого, но почему бы не сделать его глобальным фильтром? См. ниже:
Https://gist.github.com/patrickcurl/279628e1ff6751f1e50679878aeffc
Это всего лишь несколько распространенных ошибок Vue.js, с которыми я встречался на своем пути, я уверен, что есть и другие. Есть ли что-то, что я забыл добавить в список? Пожалуйста, поделитесь в комментариях!
