Руководство
Основы
- Установка
- Введение
- Экземпляр Vue
- Синтаксис шаблонов
- Вычисляемые свойства и слежение
- Работа с классами и стилями
- Условная отрисовка
- Отрисовка списков
- Обработка событий
- Работа с формами
- Основы компонентов
Продвинутые компоненты
- Регистрация компонентов
- Входные параметры
- Пользовательские события
- Слоты
- Динамические и асинхронные компоненты
- Обработка крайних случаев
Переходы и анимации
- Анимирование списков и появления/исчезновения
- Анимирование переходов между состояниями
Переиспользование и композиция
- Примеси
- Пользовательские директивы
- Render-функции и JSX
- Плагины
- Фильтры
Инструментарий
- Однофайловые компоненты
- Тестирование
- Поддержка TypeScript
- Публикация на production
Масштабирование
- Роутинг
- Управление состоянием приложения
- SSR. Отрисовка на стороне сервера
- Безопасность
Продвинутые темы
- Подробно о реактивности
Вопросы миграции
- Миграция с Vue 1.x
- Миграция с Vue Router 0.7.x
- Миграция с Vuex 0.6.x на 1.0
Мета
- Сравнение с другими фреймворками
- Присоединяйтесь к сообществу Vue.js!
- Познакомьтесь с командой
Эта документация для версий v2.x и ранее. Для v3.x, документация на русском здесь.
Экземпляр Vue
Создание экземпляра Vue
Каждое приложение начинается с создания нового экземпляра Vue с помощью функции Vue
:
|
Хоть Vue и не реализует паттерн MVVM в полной мере, архитектура фреймворка им во многом вдохновлена. Поэтому переменную с экземпляром Vue традиционно именуют vm
(сокращённо от ViewModel).
При создании экземпляра Vue необходимо передать объект опций. Большая часть этого руководства посвящена описанию, как можно использовать эти опции для достижения желаемого поведения. Полный список опций можно посмотреть в справочнике API.
Приложение Vue состоит из корневого экземпляра Vue, создаваемого с помощью new Vue
, опционально организованного в дерево вложенных, повторно используемых компонентов. Например, дерево компонентов для приложения TODO-списка может выглядеть так:
|
Подробнее о системе компонентов мы поговорим позднее. А сейчас запомните, что все компоненты Vue также являются экземплярами Vue и поэтому принимают такой же объект опций (за исключением нескольких специфичных для корневого).
Данные и методы
Когда экземпляр Vue создан, он добавляет все свойства, найденные в опции data
, в систему реактивности Vue. Поэтому представление будет «реагировать» на их изменения, обновляясь в соответствии с новыми значениями.
|
Когда значения изменяются, представление будет переотрисовано. Но обратите внимание, свойства в data
будут реактивными, только если они существовали при создании экземпляра. Это значит, если добавить новое свойство, например:
|
То изменения в b
не будут вызывать никаких обновлений. Если вы знаете, что свойство вам понадобится позже, но изначально оно пустое или несуществующее, нужно просто установить начальное значение. Например:
|
Единственным исключением здесь является использование Object.freeze()
, который предотвращает изменение существующих свойств, что также означает невозможность отслеживать изменения системой реактивности.
|
|
Кроме свойств объекта data
, экземпляры Vue предоставляют ряд служебных свойств и методов экземпляра. Их имена начинаются с префикса $
, чтобы отличаться от пользовательских свойств. Например:
|
С полным списком свойств и методов экземпляра Vue можно ознакомиться в справочнике API.
Хуки жизненного цикла экземпляра
Каждый экземпляр Vue при создании проходит через последовательность шагов инициализации — например, настраивает наблюдение за данными, компилирует шаблон, монтирует экземпляр в DOM, обновляет DOM при изменении данных. Между этими шагами вызываются функции, называемые хуками жизненного цикла, с помощью которых можно выполнять свой код на определённых этапах.
Например, хук created
можно использовать для выполнения кода после создания экземпляра:
|
Существуют и другие хуки, вызываемые на различных стадиях жизненного цикла экземпляра, например mounted
, updated
и destroyed
. Все хуки вызываются с контекстной переменной this
, ссылающейся на вызывающий экземпляр Vue.
Не используйте стрелочные функции в свойствах экземпляра и в коллбэках, например created: () => console.log(this.a)
или vm.$watch('a', newVal => this.myMethod())
. Так как стрелочные функции не имеют собственного this
, то this
в коде будет обрабатываться как любая другая переменная и её поиск будет производиться в областях видимости выше до тех пор пока не будет найдена, часто приводя к таким ошибкам, как Uncaught TypeError: Cannot read property of undefined
или Uncaught TypeError: this.myMethod is not a function
.
Диаграмма жизненного цикла
Ниже представлена диаграмма жизненного цикла экземпляра. Необязательно понимать её полностью прямо сейчас, но по мере изучения и практики разработки к ней полезно будет обращаться.