Этот веб-сайт переехал в новый дом!

Vue был выпущен в 2014 году. С того времени я подумал: Да, просто еще один JS-фреймворк, чтобы изобрести колесо. Но с прошлого года он стал становиться все более популярным и привлек мое внимание. После первоначального чтения я подумал, что стоит попробовать посмотреть, есть ли в нем что сказать, чтобы решить недостатки React или Angular.

Также в последнее время стала популярной дискуссия о том, что Vue выиграл звездную войну на Github ⭐️ для JS-проектов, что неплохо. Но в то же время это не отражает реальной популярности на текущем рынке JS, хотя внедрение Vue растет.

Итак, я хотел поиграть с Vue; поэтому я решил создать клон Twitter на Vue без какой-либо конфигурации для создания временной шкалы для некоторых из лучших писателей, которые мне нравятся. Итак, я начал читать о Vue и поделюсь здесь тем, что я узнал, и некоторыми идеями.

Первое, что вы замечаете, когда начинаете работать с Vue, это легко начать и легко поддерживать. У него есть два способа привязки данных, которые напоминают мне Angular 1.x, а система на основе компонентов вдохновлена ​​React, созданным в удовлетворительной комбинации. Относительно этого в документации: -

На более высоком уровне мы можем разделить компоненты на две категории: презентационные и логические. Мы рекомендуем использовать шаблоны для презентационных компонентов и функцию рендеринга / JSX для логических. Процент этих компонентов зависит от типа приложения, которое вы создаете, но в целом мы считаем, что презентационные компоненты гораздо более распространены.

В документации Vue также есть сравнение между ним и другими основными фреймворками JS. Вы можете найти его здесь для получения дополнительной информации.

Проблема была возможна, потому что Vue не требует никаких процессов сборки. Как в старые добрые времена JQuery. Говоря о Jquey, были некоторые дискуссии о том, что Vue - это новый jquery. Но я не считаю это правильным сравнением, поскольку JQuery сосредоточен на конкретной потребности, чтобы упростить управление DOM, но Vue или любой другой современный JS-фреймворк - это совсем другая история, поскольку в нем также есть управление состоянием, маршрутизация и т. Д. для создания всего Frontend-приложения.

Фактически, это была не 0 конфигурация, к которой я стремился, потому что мне нужно было добавить локальный HTTP-сервер, чтобы он лучше загружал компоненты. Но я старался сохранить баланс между показом функций Vue без необходимости добавлять дополнительные библиотеки, насколько я мог сопротивляться 🙂.

Приложение Vue

Чтобы запустить приложение Vue. вам необходимо включить версию CDN и инициализировать новый экземпляр.

Загрузка компонентов

Чтобы иметь возможность делать отдельные компоненты и иметь более структурированное приложение, я нашел полезный загрузчик http-vue-loader.

Маршрутизация

В последнем примере мы определили два маршрута / home и / addTweet, которые используют маршрутизацию Vue. А маршрутная ссылка будет выглядеть так:

Государственное управление

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

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

Затем мы можем вызвать действие магазина, чтобы добавить новый твит:

Структура компонентов

Однофайловый компонент Vue обычно включает три тега:

  • Vue-HTML ‹шаблон /›
  • ‹Сценарий /›

По умолчанию вы можете использовать шаблоны Vue-HTML. Что я предпочитаю, но если вы предпочитаете использовать синтаксис JSX, это тоже возможно.

Современные JS-фреймворки, построенные на системах на основе компонентов, «включая Vue», поддерживают идею наличия стилей CSS в одном файле компонента. Я не большой поклонник этого подхода, особенно в случае более крупных компонентов. Но для feed.vue это не было большой проблемой, поскольку он относительно небольшой.

методы против вычислений

Вначале мне было непонятно, что у Vue есть два похожих способа для написания логики приложения. Таким образом, вы можете писать методы или вычисляемые функции.

Так в чем разница? 🤔

Как упоминалось в статье css-tricks: -

Методы: это именно то, чем они могут быть (ура, именование!). Это функции, которые свисают с объекта - обычно самого экземпляра Vue или компонента Vue.

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

Если вы хотите увидеть живую демонстрацию приложения, вы можете найти ее здесь.

А полный пример кода на GitHub.

В следующих сериях

  • Лучшие практики для создания лучшего приложения Vue
  • Источник данных из реального мира
  • Более продвинутое управление состоянием с использованием Vuex

Так что не стесняйтесь делиться своими идеями и рекомендациями по улучшению или дополнительным функциям, о которых вы хотите, чтобы я написал 😉

Наконец, если вам понравился пост, поделитесь им и расскажите о себе 📡 😉