Платиновый спонсор
Поддержите Vue.js

Guide

Экземпляр Vue

Конструктор

Каждое приложение Vue загружается путём создания корневого экземпляра Vue, создаваемого с помощью функции-конструктора:

var vm = new Vue({
  // опции
})

Хотя Vue и не реализует паттерн MVVM в полной мере, архитектура фреймворка несомненно им во многом вдохновлена. Поэтому традиционно переменная с экземпляром Vue называется vm (сокращённо от ViewModel).

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

Конструктор Vue можно расширить, для получения переиспользуемого конструктора компонента с предустановленными опциями:

var MyComponent = Vue.extend({
  // опции компонента
})
// все экземпляры `MyComponent` создаются
// с предопределёнными опциями
var myComponentInstance = new MyComponent()

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

Свойства и методы

Каждый экземпляр Vue проксирует все свойства своего объекта data:

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// установка свойства также влияет на оригинальные данные
vm.a = 2
data.a // -> 2
// ... и наоборот
data.a = 3
vm.a // -> 3

Стоит заметить, что только эти проксируемые свойства являются реактивными, а любые изменения их значений будут вызывать обновление представления. Если вы установите новое свойство экземпляру после его создания, это не обновит представление. Мы обсудим реактивность в подробностях позднее.

Помимо свойств объекта data, экземпляр Vue предоставляет ряд собственных свойств и методов. Их имена начинаются с $, чтобы отличаться от свойств данных. Например:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch — это метод экземпляра
vm.$watch('a', function (newVal, oldVal) {
  // этот коллбэк будет вызван, когда изменится `vm.a`
})

Не используйте стрелочные функции в свойствах экземпляра и в коллбэках (напр. vm.$watch('a', newVal => this.myMethod())). Поскольку стрелочные функции связываются с родительским контекстом, this не будет указывать на экземпляр Vue, и this.myMethod окажется неопределённым.

Полный список свойств и методов экземпляра Vue есть в справочнике API.

Хуки жизненного цикла экземпляра

Каждый экземпляр Vue проходит при своём создании через последовательность шагов инициализации — например, настраивает наблюдение за данными, компилирует шаблон, монтирует экземпляр в DOM, а также обновляет DOM при изменении данных. Во время этих шагов вызываются хуки жизненного цикла, предоставляющие возможность выполнять какие-нибудь дополнительные действия. Например, хук created вызывается после создания экземпляра:

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` указывает на экземпляр vm
    console.log('Значение a: ' + this.a)
  }
})
// -> "Значение a: 1"

Существуют также другие хуки, вызываемые на различных стадиях жизненного цикла экземпляра, например mounted, updated, и destroyed. Все хуки вызываются с контекстной переменной this, ссылающейся на вызывающий экземпляр Vue. Возможно, вы недоумевали: где же в мире Vue живут контроллеры? Ответ на этот вопрос таков: контроллеров не существует. Всё пользовательское поведение компонента должно быть размещено в этих хуках.

Диаграмма жизненного цикла

Ниже представлена диаграмма жизненного цикла экземпляра. Необязательно понимать её полностью уже сейчас, но в будущем она вам пригодится.

Lifecycle

← Введение Синтаксис шаблонов →
Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на Github!