Главная » Статьи » 10 вещей, которые я люблю в Vue JS

10 вещей, которые я люблю в Vue JS

10 вещей, которые я люблю в Vue JS

От автора: я люблю Vue JS. В 2016 я впервые познакомился с этим инструментом, скорее всего, потому что устал от JS фреймворков. На тот момент я уже работал с Backbone, Angular, React и т.д., и мне не особо хотелось изучать новый фреймворк. Так было, пока я не прочитал комментарий на hacker news, где говорили, что Vue – это как «новый jQuery» в мире JS. И мне стало любопытно. Тогда я было доволен React – это хороший фреймворк, основанный на жестких принципах дизайна, сосредоточенных вокруг шаблонов представления, виртуального DOM и реагирования на состояния. В Vue также все это есть. В этой статье я расскажу, почему мне нравится Vue. Я предпочел его другим решениям. Возможно, вы согласитесь с некоторыми доводами, но я хочу как минимум дать вам представление о то, как разрабатывать современные JS приложения с помощью Vue.

1. Минимальный синтаксис шаблонов

Синтаксис шаблонов по умолчанию в Vue – минимален, лаконичный и расширяемый. Можно просто не использовать стандартный синтаксис шаблонов, а взять что-то типа JSX, как и со многими другими частями Vue (по этой теме есть даже официальная страница документации). Но я не знаю, зачем это делать. К JSX есть критические замечания: так как граница JS и HTML размывается, очень легко начать писать сложный код в шаблоне, который необходимо было бы отделить и написать в другом месте в JS коде.

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

<template> <div id="app"> <ul> <li v-for='number in numbers' :key='number'>{{ number }}</li> </ul> <form @submit.prevent='addNumber'> <input type='text' v-model='newNumber'> <button type='submit'>Add another number</button> </form> </div>
</template> <script>
export default { name: 'app', methods: { addNumber() { const num = +this.newNumber; if (typeof num === 'number' && !isNaN(num)) { this.numbers.push(num); } } }, data() { return { newNumber: null, numbers: [1, 23, 52, 46] }; }
}
</script> <style lang="scss">
ul { padding: 0; li { list-style-type: none; color: blue; }
}
</style> 

Мне нравится краткий синтаксис присвоения в Vue. Символ : присваивает переменные в шаблоне, а @ присваивает события. Это мелочи, но так приятно их использовать и поддерживать краткость компонентов.

2. Компоненты в одном файле

Когда люди пишут в Vue, они используют «компоненты в одном файле». Это файл с суффиксом .vue, состоящий из 3 частей (css, html и JS) для каждого компонента.

Это правильное сочетание технологий. В одном месте легче понять все компоненты. У такого стиля есть побочный эффект – вы сами стараетесь поддерживать краткость компонентов. Если JS, CSS и HTML компонента занимают слишком много строк, может, пора создать больше модулей.

В тег style компонента Vue можно добавить атрибут scoped. Атрибут полностью инкапсулирует стили компонента. То есть если в компоненте есть CSS селектор .name, это правило не будет применяться к другому компоненту. Этот способ стилизации компонентов представления мне нравится больше, чем подходы написания CSS в JS, что сейчас популярно в крупных фреймворках.

Еще один плюс компонентов в одном файле заключается в том, что это полностью валидные HTML5 файлы. template, script, style — все эти теги входят в официальную спецификацию w3c. То есть большая часть используемых вами инструментов в процессе разработки (например, линтеры) могут работать по умолчанию с минимальной адаптацией.

3. Vue как новый jquery

На самом деле эти 2 библиотеки отличаются и выполняю разные задачи. Я представлю ужасную аналогию, но я люблю ей описывать отношения Vue и jQuery: Beatles и Led Zeppelin. Beatles не нуждаются в представлении, это величайшая группа 1960-ых, оказавшая огромное влияние. В 1970-ых отдать титул «самой великой» группы уже сложнее, и это Led Zeppelin. Можно сказать, что музыкальная связь между Beatles и Led Zeppelin незначительна, и у них разная музыка, но необходимо принять некий уровень техники и влияния. Возможно, JS мир 2010-ых это как 1970-ые в музыке, а так как Vue чаще «ставят в эфир», то он и привлекает больше фанатов.

Философия, которая сделала jQuery популярным, есть и в Vue: простота в обучении и вся мощь создания отличных веб-приложений по современным веб-стандартам. На самом деле, Vue – лишь оболочка вокруг JS объектов.

4. Простота расширения

Как говорилось ранее, по умолчанию Vue использует стандартный HTML, JS и CSS для создания своих компонентов. Однако вы с легкостью можете подключить другие технологии. Если вам необходимо использовать pug вместо HTML, typescript вместо JS или Sass вместо CSS, вам лишь нужно установить соответствующие модули node и добавить атрибут в соответствующий раздел однофайлового компонента. В проекте даже можно перемешивать и сочетать компоненты. Например, одни компоненты используют HTML, а другие pug, но мне кажется, это не лучшая затея.

5. Virtual DOM

Virtual DOM используется во многих фреймворках, и это круто. Это значит, что фреймворк может решить, что изменилось в состоянии, а затем эффективно применить обновления DOM, сводя к минимуму повторный рендер и оптимизацию производительности приложения. Сегодня все кому не лень используют Virtual DOM. Пока это не что-то уникальное, это круто.

6. Vuex

В большинстве приложений сложно управлять состояниями. Эту проблему не решить одной библиотекой представления. В Vue для этого есть библиотека vuex. Она легко настраивается и хорошо интегрируется с Vue. Кто знает Redux, те сразу поймут, что к чему. Но мне кажется, что интеграция Vue и vuex аккуратнее и минималистичнее, чем React и Redux. Совсем скоро JS стандартизирует оператор распространения объектов, с помощью которого можно объединять состояния или функции для управления состоянием из vuex в компонентах, где это необходимо.

7. Vue CLI

Vue предоставляет отличный CLI, что упрощает начало работы в Vue с Webpack проектами. Одной командой в терминале можно создать все необходимое: компоненты в одном файле, babel, линтинг, тестирование и понятная структура проекта. Мне не хватает в CLI vue build.

Так просто создавать, запускать и тестировать компоненты в браузере. К сожалению, эта команда была удалена из Vue. Сейчас рекомендуется использовать poi. Poi – обертка для Webpack, но это не так просто, как в твите выше.

8. Разработанная для вас оптимизация повторного рендеринга

В Vue не нужно вручную указывать, какие части DOM необходимо повторно отрендерить. Мне не нравилось управлять компонентами в React. Что-то типа «shouldComponentUpdate», чтобы остановить повторный рендер всего дерева DOM. Vue умнее.

9. Легко получить помощь

Vue набрал критическую массу разработчиков, использующих фреймворк для создания различных приложений. У него отличная документация. Помощью можно получить по нескольким каналам с множеством активных пользователей: stackoverflow, discord, twitter и т.д. Это придаст вам уверенности при создании приложения и при выборе этого, а не другого фреймворка.

10. Не поддерживается одной корпорацией

Мне кажется, хорошо, когда у библиотеки с открытым исходным кодом нет одной корпорации, которая может указывать направление ее развития. У Vue не было проблем, как у React с разрешением лицензий (сейчас решены).

В заключение скажу, что Vue – отличный выбор для любого вашего следующего JS проекта. Доступная экосистема намного больше, чем я описал в статье. Если вам нужно что-то типа full-stack, обратите внимание на Nuxt.js. Если хотите повторно используемые стилизованные компоненты, для вас есть Vuetify. Vue был одним из быстрорастущих фреймворков в 2017, и мне кажется, что в 2018 рост не прекратится. Если у вас есть лишние 30 минут, почему бы не рассмотреть Vue более подробно.

P.S. – в документации есть отличное сравнение с другими фреймворками: https://vuejs.org/v2/guide/comparison.html

Автор: Duncan Grant

Источник: https://medium.com/

Редакция: Команда webformyself.