Оригинальная ссылка:10 things I love about Vue
Оригинальный автор: Дункан Грант
Примечание переводчика: эта статья написана простым языком, это всего лишь некоторые мнения автора после попытки использовать Vue, поэтому не ожидайте глубины этой статьи, но она также может дать больше информации для пользователей, которые только начинают использовать Vue. Вью.
Я люблю Вью. Когда я впервые взял его в руки, возможно, мне было скучно с JavaScript-фреймворками. У меня есть опыт работы с Backbone, Angular, React, и я потерял энтузиазм пробовать другие фреймворки. Пока меня не заинтересовал комментарий, который я увидел в хакерских новостях, он назвал Vue «новым JQuery». В то время React меня относительно устраивал из-за его строгих принципов проектирования в отношении шаблонов представлений, виртуального DOM и отклика с отслеживанием состояния, но Vue также обладает этими характеристиками. В этом посте я хочу поговорить о том, почему Vue — мой любимый фреймворк среди других, которые я пробовал. Надеюсь, вы согласитесь со мной, но, по крайней мере, я надеюсь дать вам некоторое представление о разработке современных приложений JavaScript с помощью Vue.
минимальный синтаксис шаблона
Синтаксис шаблона Vue по умолчанию минимален, усовершенствован и расширяем. Как и во многих аспектах Vue, не использовать стандартный синтаксис шаблона тривиально, и можно использовать такой синтаксис, как JSX (официальная документация объясняет, как это сделать), но, честно говоря, я не знаю, почему вы захотите это сделать. Некоторые преимущества JSX также верны, например, стирание границ между JavaScript и HTML, и легко смешивать и писать код, который должен был быть написан в нескольких местах.
Вместо этого 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: «:» для привязки переменных данных и «@» для привязки событий. Эта функция небольшая, но она делает компоненты простыми и понятными.
компонент одного файла
Большинство людей используют «однофайловые компоненты» при написании Vue, который представляет собой файл с суффиксом .vue, состоящий из 3 частей (css, html, javascript).
Правильное выполнение упрощает понимание компонента, а также побуждает вас делать код для каждого компонента коротким. Потому что, если JavaScript, CSS и HTML в компоненте очень длинные, потребуется время, чтобы позже разбить его на модули.
при использовании в компоненте<style>При маркировке я могу добавить к нему атрибут "scoped", и определенный таким образом стиль действителен только для этого компонента. Другими словами, если в этом компоненте определен CSS-селектор .name, он не будет использоваться в других компонентах эффективен. По сравнению с подходом CSS в JS, принятым в других фреймворках, я предпочитаю этот способ написания стилей в компонентах.
Еще одним преимуществом однофайловых компонентов является то, что это допустимый файл HTML5.<template>, <script>, <style>Все они соответствуют официальному стандарту W3C, что означает, что другие инструменты, которые вы используете во время разработки (например, линтеры), можно использовать с небольшими изменениями.
Vue сравнили с новым JQuery
Эти два фреймворка на самом деле совсем не похожи и функционируют по-разному. Позвольте мне описать отношения между Vue и JQuery с помощью неудачной аналогии, которую я люблю использовать: The Beatles и Led Zeppelin. Излишне говорить, что «Битлз» были самой популярной группой 1960-х годов и имели большое влияние. Трудно сказать, кто был самой горячей группой 70-х, но Led Zeppelin иногда считали. Можно сказать, что Beatles и Led Zeppelin имеют мало общего с музыкой, и их музыка сильно отличается, но на обоих повлияло предшествующее искусство. Возможно, JavaScript после 2010 года будет похож на музыкальный мир 70-х, и чем больше Vue будет играть на радиостанциях, тем больше поклонников он привлечет.
Некоторые из философий, которые делают JQuery великим, также присутствуют в Vue: у него простая кривая обучения, но при этом есть все возможности для создания веб-приложения на основе современных веб-стандартов. Исходя из этого, Vue — это оболочка для объектов JavaScript.
легко расширить
Как упоминалось ранее, Vue по умолчанию использует стандартные HTML, JS и CSS для создания компонентов, но также легко внедрять другие технологии. Если вы хотите использовать pug вместо HTML, typescript вместо JS и sass вместо CSS, просто следуйте соответствующему модулю node и добавьте соответствующие свойства в однофайловый компонент. Вы даже можете смешивать их в проекте, с некоторыми компонентами, использующими HTML, и другими, использующими pug, хотя я не уверен, что это лучший выход.
виртуальный DOM
Виртуальный DOM великолепен и был принят многими фреймворками. Это позволяет эффективно обновлять DOM при изменении состояния, сводит к минимуму повторную визуализацию и оптимизирует производительность приложения. В наши дни у всех есть виртуальные DOM, так что в этом нет ничего уникального, но, тем не менее, это круто.
Векс великолепен
Для большинства приложений управление состоянием является сложной задачей, которую нельзя решить только на уровне представления. Решение Vue — это Vuex. Его легко настроить и интегрировать с Vue. Людям, знакомым с Redux, в это время хочется вернуться домой, но я думаю, что Vue интегрирует Vuex более лаконично, чем React интегрирует Redux. В грядущем новом стандарте для JavaScript предоставляется оператор распространения объекта, который позволяет нам комбинировать состояние или функции для управления состоянием от Vuex до компонента.
Vue CLI
Интерфейс командной строки, предоставляемый Vue, упрощает запуск проекта webpack-Vue. Одна команда может создавать проекты, поддерживающие однофайловые компоненты, Babel, linting, тестирование и разумную структуру каталогов.
Мне не хватает команды «vue build». Это упрощает создание, запуск компонентов и тестов. К сожалению, в будущем эта команда будет удалена из Vue, и вместо нее рекомендуется использовать poi. Короче говоря, poi — это оболочка для webpack, но я не думаю, что это так просто, как следующий код:
echo '<template><h1>Hello World!</h1></template>' > Hello.vue && vue build Hello.vue -o
Повторная оптимизация
В Vue вам не нужно вручную выяснять, какие части DOM нужно перерендерить, я никогда не был поклонником управления компонентами React, например, с помощью «shouldComponentUpdate», чтобы предотвратить повторную визуализацию всего дерева DOM. рендеринг. Vue умеет это делать.
легкий доступ к помощи
Vue накопил большое количество важных разработчиков, которые используют его для создания различных приложений. Документация хорошая, и если вам нужна дополнительная помощь, вы можете найти активных пользователей на многих платформах: stackoverflow, discord, twitter и т. д. Это придаст вам больше уверенности в создании вашего приложения, чем другие фреймворки с меньшим количеством пользователей.
Ни одного обслуживания предприятия
Я думаю, что для проекта с открытым исходным кодом хорошо не позволять одной компании иметь больше права голоса в направлении разработки. Такие проблемы, как авторизация React, Vue не имеют.
В конце концов, я думаю, что Vue — хороший выбор для любого вашего проекта JavaScript. Его экология намного больше, чем то, что я упомянул в этой статье. Для полного аспекта стека вы можете посмотреть Nuxt.js. Если вам нужны повторно используемые компоненты, вы можете взглянуть на Vuetify. Vue был одним из самых быстрорастущих фреймворков в 2017 году, и я не думаю, что его рост замедлится в 2018 году. Если у вас осталось 30 минут, почему бы не встать и посмотреть, что Vue может сделать для вас?
P.S. Документация по сравнению Vue и других фреймворков:Сравнение с другими фреймворками — Vue.js