Руководство

Экземпляр Vue

Создание экземпляра Vue

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

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

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

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

Приложение Vue состоит из корневого экземпляра Vue, созданного с помощью new Vue, опционально организованного в дерево вложенных, повторно используемых компонентов. Например, дерево компонентов для приложения TODO-списка может выглядеть так:

Корневой экземпляр
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

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

Данные и методы

Когда экземпляр Vue создан, он добавляет все свойства, найденные в его объекте data, в систему реактивности Vue. Когда значения этих свойств изменятся, представление будет «реагировать», обновляясь в соответствии с новыми значениями.

// Наш объект data
var data = { a: 1 }

// Объект добавляется в экземпляр Vue
var vm = new Vue({
  data: data
})

// Получение свойства из экземпляра
// возвращает то же значение из исходных данных
vm.a === data.a // => true

// Изменение свойства экземпляра
// будет влиять на оригинальные данные
vm.a = 2
data.a // => 2

// ... и наоборот
data.a = 3
vm.a // => 3

Когда эти данные изменятся, представление будет перерендерено (повторно отображено). Следует запомнить, что свойства в data будут реактивными, только если они существовали при создании экземпляра. Это означает, что если вы добавите новое свойство, например:

vm.b = 'hi'

То изменения в b не будут вызывать никаких обновлений. Если вы знаете, что свойство вам понадобится позже, но изначально оно пустое или несуществующее, вам просто нужно установить начальное значение. Например:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

Единственным исключением из этого является использование Object.freeze(), которое предотвращает изменение существующих свойств, что также означает, что система реактивности не сможет отслеживать изменения.

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
<div id="app">
  <p>{{ foo }}</p>
  <!-- мы теперь не можем обновить `foo`! -->
  <button v-on:click="foo = 'baz'">Изменить</button>
</div>

Помимо свойств объекта 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 (newValue, oldValue) {
  // Этот коллбэк будет вызван, когда изменится `vm.a`
})

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

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

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

Например, хук created может быть использован для выполнения кода после создания экземпляра:

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

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

Не используйте стрелочные функции в свойствах экземпляра и в коллбэках, например created: () => console.log(this.a) или vm.$watch('a', newVal => this.myMethod()). Поскольку стрелочные функции связываются с родительским контекстом, this не будет указывать на экземпляр Vue, часто приводя к таким ошибкам, как Uncaught TypeError: Cannot read property of undefined или Uncaught TypeError: this.myMethod is not a function.

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

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

Жизненный цикл экземпляра Vue

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