Итак, вы разработчик React и решили попробовать Vue.js. Добро пожаловать на вечеринку!
React и Vue похожи на Coke и Pepsi, поэтому многое из того, что вы можете сделать в React , можно сделать и в Vue. Однако есть некоторые важные концептуальные различия, некоторые из которых отражают влияние Angular на Vue.
Я сосредоточусь на различиях в этой статье, поэтому вы готовы сразу перейти к Vue и быть продуктивным.
Насколько велика разница между React и Vue?
React и Vue имеют больше сходства, чем различий:
- Оба являются библиотеками JavaScript для создания пользовательских интерфейсов.
- Оба быстрые и легкие.
- Оба имеют компонентную архитектуру.
- Оба используют виртуальный DOM.
- Оба могут быть помещены в один файл HTML или быть модулем в более сложной настройке Webpack.
- Оба имеют отдельные, но обычно используемые маршрутизаторы и библиотеки управления состоянием.
Большая разница в том, что Vue обычно использует файл шаблона HTML, тогда как React полностью JavaScript. Vue также имеет изменяемое состояние и автоматическую систему для повторного рендеринга, называемую «реактивность».
Мы разберем все это ниже.
Составные части
С помощью Vue.js компоненты объявляются с помощью метода API, .componentкоторый принимает аргументы для idобъекта и определения. Вы, вероятно, заметите знакомые аспекты компонентов Vue и не очень знакомые аспекты:
JavaScript
1
Vue.component('my-component', {
2
// Props
4
props: [ 'myprop' ],
5
// Local state
7
data() {
8
return {
9
firstName: 'John',
10
lastName: 'Smith'
11
}
12
},
13
// Computed property
15
computed: {
16
fullName() {
17
return this.firstName + ' ' + this.lastName;
18
}
19
},
20
// Template
22
template: `
23
<div>
24
<p>Vue components typically have string templates.</p>
25
<p>Here's some local state: {{ firstName }}</p>
26
<p>Here's a computed value: {{ fullName }}</p>
27
<p>Here's a prop passed down from the parent: {{ myprop }}</p>
28
</div>
29
`,
30
// Lifecycle hook
32
created() {
33
setTimeout(() => {
34
this.message = 'Goodbye World'
35
}, 2000);
36
}
37
});
шаблон
Вы заметите, что у компонента есть templateсвойство, представляющее собой строку HTML-разметки. Библиотека Vue включает в себя компилятор, который превращает строку шаблона в renderфункцию во время выполнения. Эти функции рендеринга используются виртуальным DOM.
Вы можете не использовать шаблон, если хотите вместо этого определить свою собственную renderфункцию. Вы даже можете использовать JSX. Но переключиться на Vue просто для того, чтобы поехать в Италию и не есть пиццу ...
Крючки жизненного цикла
Компоненты в Vue имеют методы жизненного цикла, аналогичные компонентам React . Например, createdперехват запускается, когда состояние компонента готово, но до того, как компонент был смонтирован на странице.
Одно большое отличие: нет эквивалента shouldComponentUpdate. Это не нужно из-за системы реактивности Vue.
Re-Rendering
Один из шагов инициализации Vue - просмотреть все свойства данных и преобразовать их в методы получения и установки. Если вы посмотрите ниже, вы увидите, как к messageсвойству data добавлена функция get и set:
Vue добавил эти методы получения и установки, чтобы включить отслеживание зависимостей и уведомление об изменениях при обращении или изменении свойства.
Изменчивое состояние
Чтобы изменить состояние компонента в Vue, вам не нужен setStateметод, вы просто идете вперед и мутируете:
JavaScript
xxxxxxxxxx
1
// React
2
this.setState({ message: 'Hello World' });
3
// Vue
5
this.message = 'Hello World';
Когда значение messageизменяется мутацией, его установщик срабатывает. setМетод будет установить новое значение, но также будет осуществлять вторичную задачу информирования Vue , что значение изменилось , и любую часть страницы , опираясь на него , возможно , потребуется , чтобы быть повторно вынесено.
Если messageVue передается в качестве опоры для любых дочерних компонентов, Vue знает, что они зависят от этого, и они также будут автоматически перерисованы. Вот почему нет необходимости в shouldComponentUpdateметоде для компонентов Vue.
Вам также может понравиться:
Vue Tutorial 5 - Привязка данных формы .
Основной шаблон
Vue больше похож на Angular относительно основного файла шаблона. Как и в случае с React, Vue нужно монтировать где-то на странице:
JavaScript
xxxxxxxxxx
1
<body>
2
<div id="root"></div>
3
</body>
4
// React
5
ReactDOM.render('...', document.getElementById('root'));
6
// Vue
8
new Vue({
9
el: '#root'
10
});
Но в отличие от React, вы можете продолжать добавлять к этому основному, так index.htmlкак это шаблон для вашего корневого компонента.
HTML
xxxxxxxxxx
1
<div id="root">
2
<div>You can add more markup to index.html</div>
3
<my-component v-bind:myprop="myval"></my-component>
4
</div>
Также есть способ определить ваши дочерние шаблоны компонентов index.htmlс помощью таких функций HTML, как x-templateили inline-template. Это не считается наилучшей практикой, поскольку отделяет шаблон от остальной части определения компонента.
Директивы
Опять же, как и Angular, Vue позволяет вам улучшать ваши шаблоны с помощью логики через «директивы». Это специальные атрибуты HTML с префиксом v, например, v-ifдля условного рендеринга и v-bindдля привязки выражения к обычному атрибуту HTML.
JavaScript
xxxxxxxxxx
1
new Vue({
2
el: '#app',
3
data: {
4
mybool: true,
5
myval: 'Hello World'
6
}
7
});
8
<div id="app">
10
<div v-if="mybool">This renders if mybool is truthy.</div>
11
<my-component v-bind:myprop="myval"></my-component>
12
</div>
Значение, присвоенное директиве, является выражением JavaScript, поэтому вы можете ссылаться на свойства данных, включая троичные операторы и т. Д.
Workflow
У Vue нет официального create-react-appэквивалента, хотя сообщество построено create-vue-app.
Официальная рекомендация по загрузке проекта, однако, такова vue-cli. Он может генерировать что угодно: от простого проекта с одним файлом HTML до полностью удаленного проекта Webpack + Server-Rendering:
Оболочка
xxxxxxxxxx
1
$ vue init template-name project-name
Проекты с одним HTML-файлом
Создатель Vue Эван Вы назвал его проект «прогрессивной структурой», поскольку его можно масштабировать для сложных приложений или уменьшать для простых приложений.
Конечно, React может сделать это тоже. Разница в том, что проекты Vue обычно используют меньше функций ES6 и редко используют JSX, поэтому обычно нет необходимости добавлять Babel. Кроме того, все библиотеки Vue поставляются в одном файле, отдельного файла для эквивалента ReactDOM не существует.
Вот как вы добавляете Vue в один файл HTML-проекта:
HTML
xxxxxxxxxx
1
<script src="https://unpkg.com/vue/dist/vue.js"></script>
Примечание: если вы не собираетесь использовать строки шаблона и, следовательно, не нуждаетесь в компиляторе шаблона, существует меньшая сборка Vue, в которой этот вызов не указывается
vue.runtime.js. Это примерно на 20 КБ меньше.
Компоненты одного файла
Если вы счастливы добавить шаг сборки в свой проект с помощью такого инструмента, как Webpack, вы можете использовать Vue Single File Components (SFC). Это файлы, которые имеют .vueрасширение и инкапсулируют шаблон компонента, конфигурацию и стиль JavaScript в одном файле:
HTML
xxxxxxxxxx
1
<template>
2
<div class="my-class">{{ message }}</div>
3
</template>
4
<script>
5
export default {
6
data() {
7
message: 'Hello World'
8
}
9
}
10
</script>
11
<style>
12
.my-class { font-weight: bold; }
13
</style>
Это, без сомнения, одна из самых классных функций Vue, потому что вы получаете «правильный» шаблон с разметкой HTML, но JavaScript тут как тут, поэтому нет неловкого разделения шаблона и логики.
Есть загрузчик Webpack, vue-loaderкоторый занимается обработкой SFC. В процессе сборки шаблон преобразуется в функцию рендеринга, так что это идеальный вариант использования для урезанной vue.runtime.jsсборки в браузере.
Redux и многое другое
Vue также имеет основанную на Flux библиотеку управления состояниями под названием Vuex. Опять же, он похож на Redux, но имеет ряд отличий.
У меня нет времени, чтобы осветить это в этой статье, поэтому я расскажу об этом на следующей неделе. Подпишитесь на мою рассылку, чтобы получать обновления по электронной почте, когда она будет готова!