vue2_rus

API

Глобальные параметры

Vue.config — это объект, содержащий глобальные параметры Vue. Перед загрузкой приложения можно изменить следующие свойства:

silent

Тип: boolean
По умолчанию: false
Использование:
```
Vue.config.silent = true
```
Отключение вывода журналов и предупреждений Vue.

optionMergeStrategies

Тип: { [key: string]: Function }
По умолчанию: {}

Использование:

Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
  return child + 1
}

const Profile = Vue.extend({
  _my_option: 1
})

// Profile.options._my_option = 2

Изменение стратегии слияния настроек на вашу собственную.

Функция слияния получает значения настроек родительского и дочернего элемента первым и вторым аргументами соответственно. Третьим аргументом передаётся контекст действующего экземпляра Vue.

См. также: Пользовательские стратегии слияния настроек

devtools

Тип: boolean
По умолчанию: true (false в промышленных-сборках)

Использование:

// убедитесь, что устанавливаете свойство синхронно сразу после загрузки Vue
Vue.config.devtools = true

Определяет, должен ли Vue разрешать vue-devtools проводить исследование. Значение по умолчанию для разработки — true, для продуктива — false. Установите true, чтобы vue-devtools работали и в продуктиве.

errorHandler

Тип: Function
По умолчанию: undefined
Использование:
```
Vue.config.errorHandler = function (err, vm, info) {
  // Обработка ошибки. В `info` подробности Vue-специфичной ошибки,
  // например, в каком перехватчике жизненного цикла произошла ошибка.
  // Доступно только в версиях 2.2.0+
}
```
Определение обработчика для ошибок, не отловленных во время отрисовки компонентов и в наблюдателях. Обработчик получает аргументами ошибку и действующий экземпляр Vue.

В версиях 2.2.0+, этот перехватчик также отслеживает ошибки в перехватчиках жизненного цикла компонентов. Кроме того, если установлено значение undefined, отловленные ошибки будут выведены через console.error вместо остановки приложения.

В версиях 2.4.0+, этот перехватчик также отслеживает ошибки, возникающие внутри пользовательских обработчиков событий Vue.

В версиях 2.6.0+, этот перехватчик также отслеживает ошибки, возникающие внутри v-on слушателей DOM. Кроме того, если какой-либо из покрываемых перехватчиков или обработчиков возвращает цепочку Promise (например, асинхронные функции), ошибка из этой цепочки Promise также будет обработана.

Сервисы отслеживания ошибок Sentry и Bugsnag предлагают официальное сопряжение с использованием этого свойства.

warnHandler

Добавлено в версии 2.4.0+

Тип: Function
По умолчанию: undefined
Использование:
```
Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` — это трассировка иерархии компонентов
}
```
Определение пользовательского обработчика для предупреждений Vue во время выполнения. Обратите внимание, работает он только с версией для разработки и игнорируется в версии для продуктива.

ignoredElements

Тип: Array<string | RegExp>
По умолчанию: []
Использование:
```
Vue.config.ignoredElements = [
  'my-custom-web-component',
  'another-web-component',
  // Используйте `RegExp` для игнорирования элементов, начинающихся с «ion-»
  // Добавлено в версии 2.5.0+
  /^ion-/
]
```
Список элементов, которые игнорируются Vue. Это могут быть компоненты, устанавливаемые за пределами Vue (например, через Web Components API). В противном случае, будет возникать предупреждение о «Неизвестном пользовательском элементе», предполагая, что вы забыли зарегистрировать компонент или допустили ошибку в написании имени компонента.

keyCodes

Тип: { [key: string]: number | Array<number> }
По умолчанию: {}

Использование:

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase НЕ БУДЕТ РАБОТАТЬ
  mediaPlayPause: 179,
  // используйте kebab-case в двойных кавычках
 "media-play-pause": 179,
  up: [38, 87]
}

<input type="text" @keyup.media-play-pause="method">

Определение пользовательских псевдонимов кодов клавиш для директивы v-on.

performance

Добавлено в версии 2.2.0+

Тип: boolean
По умолчанию: false (с версии 2.2.3+)
Использование:

Установка true включает отслеживание производительности на этапах инициализации, компиляции, отрисовки и обновления компонента на графике в инструментах разработчика обозревателя. Работает только в режиме разработки в обозревателях, которые поддерживают performance.mark API.

productionTip

Добавлено в версии 2.2.0+

Тип: boolean
По умолчанию: true
Использование:

Установка false отключает предупреждение о работе в режиме разработки при запуске Vue.

Глобальный API

Vue.extend( options )

Аргументы:
- {Object} options
Использование:

Создаёт «подкласс» базового конструктора Vue. Принимает параметром объект с настройками нового компонента. Внимание: у объекта, передаваемого в Vue.extend(), свойство data должно быть функцией.

  <div id="mount-point"></div>

  // Создание конструктора
  var Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}}, также известный как {{alias}}</p>',
    data: function () {
      return {
        firstName: 'Уолтер',
        lastName: 'Уайт',
        alias: 'Гейзенберг'
      }
    }
  })
  // создаёт экземпляр Profile и монтирует его к элементу DOM
  new Profile().$mount('#mount-point')

Результатом будет:

  <p>Уолтер Уайт, также известный как Гейзенберг</p>

См. также: Компоненты

Vue.nextTick( [callback, context] )

Аргументы:
- {Function} [callback]
- {Object} [context]
Использование:

Вызов функции callback при следующем цикле обновления DOM. Используйте для работы с обновлённым DOM после изменения данных.

  // изменение данных
  vm.msg = 'Привет'
  // DOM ещё не обновлён
  Vue.nextTick(function () {
    // теперь DOM обновлён
  })

  // использование с Promise (добавлено в 2.1.0+, см. примечание ниже)
  Vue.nextTick()
    .then(function () {
      // DOM обновлён
    })

Добавлено в версии 2.1.0+: функция возвращает Promise, когда не указан обратновызов и они поддерживаются окружением. Обратите внимание, Vue не поставляется с модернизатором для Promise. Если требуется поддержка обозревателей, которые не поддерживают их родным способом (например, IE), необходимо предоставить модернизатор самостоятельно.

См. также: Асинхронная очередь обновлений

Vue.set( target, propertyName/index, value )

Аргументы:
- {Object | Array} target
- {string | number} propertyName/index
- {any} value
Возвращает: установленное значение.
Использование:

Добавление свойства к реактивному объекту, гарантируя, что новое свойство также будет реактивным и будет вызвано обновление представления. Это пригодится для добавления новых свойств к реактивным объектам, поскольку иначе Vue не может отследить эти изменения (например, this.myObject.newProperty = 'hi').

Обратите внимание, объект не может быть экземпляром Vue или корневым объектом данных экземпляра Vue.

См. также: Подробно о реактивности

Vue.delete( target, propertyName/index )

Аргументы:
- {Object| Array} target
- {string | number} propertyName/index
Только в версиях 2.2.0+: возможность работы с массивами + индексами.
Использование:

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

Объект target не может быть экземпляром Vue, или корневым объектом данных экземпляра Vue.

См. также: Подробно о реактивности

Vue.directive( id, [definition] )

Аргументы:
- {string} id
- {Function | Object} [definition]

Использование:

Регистрирует новую глобальную директиву или возвращает уже зарегистрированную.

// регистрируем директиву-объект:
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// регистрируем директиву в виде простой функции:
Vue.directive('my-directive', function () {
  // Vue будет вызывать эту функцию для `bind` и `update`
})

// получаем определение директивы, если она зарегистрирована:
var myDirective = Vue.directive('my-directive')

См. также: Пользовательские директивы

Vue.filter( id, [definition] )

Аргументы:
- {string} id
- {Function} [definition]

Использование:

Регистрирует новый глобальный фильтр или возвращает уже зарегистрированный.

// регистрируем фильтр:
Vue.filter('my-filter', function (value) {
  // возвращаем обработанное значение
})

// получаем фильтр, если он зарегистрирован:
var myFilter = Vue.filter('my-filter')

См. также: Фильтры

Vue.component( id, [definition] )

Аргументы:
- {string} id
- {Function | Object} [definition]

Использование:

Регистрирует глобальный компонент или возвращает уже зарегистрированный. Регистрация автоматически устанавливает переданный id в name компонента.

// регистрируем конструктор, полученный из `Vue.extend`:
Vue.component('my-component', Vue.extend({ /* ... */ }))

// регистрируем объект с настройками
// (Vue вызовет для этого объекта `Vue.extend` автоматически):
Vue.component('my-component', { /* ... */ })

// получаем зарегистрированный компонент (всегда возвращает конструктор):
var MyComponent = Vue.component('my-component')

См. также: Компоненты

Vue.use( plugin )

Аргументы:
- {Object | Function} plugin
Использование:

Устанавливает добавку Vue.js. Если добавка — объект, у него должен быть публичный метод install. Если добавка — функция, она будет воспринята как метод install. Этот метод будет выполнен с Vue в качестве аргумента. Этот метод необходимо вызывать перед new Vue(). Добавка устанавливается только один раз, независимо от числа вызовов этого метода с одной и той же добавкой.

См. также: Добавки

Vue.mixin( mixin )

Аргументы:
- {Object} mixin
Использование:

Применяет примесь ко всем созданным впоследствии экземплярам Vue. Таким образом авторы добавок могут встраивать желаемое поведение во все компоненты. Не рекомендуется использовать в коде приложений.

См. также: Глобальные примеси

Vue.compile( template )

Аргументы:
- {string} template
Использование:

Компилирует строковый шаблон в render-функцию. Доступно только в полной сборке.

  var res = Vue.compile('<div><span>{{ msg }}</span></div>')

  new Vue({
    data: {
      msg: 'hello'
    },
    render: res.render,
    staticRenderFns: res.staticRenderFns
  })

См. также: Render-функции и JSX

Vue.observable( object )

Добавлено в версии 2.6.0+

Аргументы:
- {Object} object
Использование:

Создание реактивного объекта. Внутренне Vue реализует подобное для объекта, возвращаемого функцией data. Возвращаемый объект можно использовать внутри рисующих-функций и вычисляемых свойств, а при его изменениях будут вызываться соответствующие обновления. Также его можно использовать как небольшое межкомпонентное хранилище для простых сценариев:

  const state = Vue.observable({ count: 0 })
   const Demo = {
    render(h) {
      return h('button', {
        on: { click: () => { state.count++ }}
      }, `счётчик — ${state.count}`)
    }
  }

В версии Vue 2.x, Vue.observable напрямую изменяет передаваемый ему объект, поэтому он равен возвращаемому объекту, как продемонстрировано здесь. В Vue 3.x уже будет возвращаться реактивный прокси, оставляя исходный объект нереактивным при изменениях напрямую. Поэтому, для будущей совместимости, рекомендуем всегда работать с объектом, возвращаемым Vue.observable, а не с объектом переданным ему изначально.

См. также: Подробно о реактивности

Vue.version

Подробности: Возвращает версию Vue в виде строки. Это может пригодиться при разработке добавок и компонентов, где используются различные стратегии для работы с разными версиями.

Использование:

var version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Неподдерживамые версии Vue
}

Настройки — данные

data

Тип: Object | Function
Ограничение: При создании компонента, может быть только тип Function.
Подробности:

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

Добавлять реактивные свойства к корневому объекту данных после инициализации нельзя. Определяйте все корневые реактивные свойства до создания экземпляра.

После создания экземпляра, объект с данными доступен через vm.$data. Экземпляр Vue также прокидывает все свойства объекта, поэтому vm.a аналогично vm.$data.a.

Свойства, имена которых начинаются с _ или $, не будут прокидываться из-за возможных конфликтов с внутренними свойствами и методами API Vue. Получить доступ к таким свойствам можно через vm.$data._property.

При определении компонента настройка data должна быть функцией, которая возвращает объект данных, потому что может быть создано множество экземпляров. Если использовать в data простой объект, то все созданные экземпляры получат ссылку на него! А когда data — функция, при создании нового экземпляра можно вызвать её и получить свежую копию данных для инициализации.

Чтобы сделать полную копию оригинального объекта, передайте vm.$data в JSON.parse(JSON.stringify(...)).

Пример:

var data = { a: 1 }

// создаём экземпляр напрямую:
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// обязательно используйте функцию во `Vue.extend()`:
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

Обратите внимание, если использовать стрелочную функцию в свойстве data, то this не будет указывать на экземпляр компонента, но получить к нему доступ можно из первого аргумента функции:

  data: vm => ({ a: vm.myProp })

См. также: Подробно о реактивности

props

Тип: Array<string> | Object
Подробности:

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

При использовании объектного синтаксиса можно указать следующие настройки: - type: может быть одним из следующих родных конструкторов: String, Number, Boolean, Array, Object, Date, Function, Symbol, любой функцией пользовательского конструктора или массивов таких. Проверяет является ли входной параметр указанного типа и выдаёт предупреждение если нет. Подробнее в разделе указания типов входных параметров. - default: any Определяет значение по умолчанию для входного параметра. Если входной параметр не был передан, то будет использовано это значение. Для объекта или массива значение по умолчанию нужно указывать фабричной функцией, возвращающей объект или массив. - required: Boolean Определяет является ли входной параметр обязательным. В не-продуктивных окружениях будет выведено предупреждение в консоли, если значение истинно, а входной параметр не передавался. - validator: Function Пользовательская функция проверки, которая принимает входной параметр в качестве единственного аргумента. В не-рабочих окружениях будет выведено предупреждение в консоли, если эта функция возвращает ложное значение (т.е. проверка не пройдена). Подробнее о проверке входных параметров можно прочитать здесь.

Пример:

// простая форма записи:
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// объект с указанием правил проверки:
Vue.component('props-demo-advanced', {
  props: {
    // только проверка типа
    height: Number,
    // проверка типа и другие правила проверки
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

См. также: Входные параметры

propsData

Тип: { [key: string]: any }
Ограничение: учитывается только при создании экземпляра выражением new.
Подробности:

Входные параметры компонента при его создании. Обычно используются для целей модульного тестирования.

Пример:

  var Comp = Vue.extend({
    props: ['msg'],
    template: '<div>{{ msg }}</div>'
  })

  var vm = new Comp({
    propsData: {
      msg: 'привет'
    }
  })

computed

Тип: { [key: string]: Function | { get: Function, set: Function } }
Подробности:

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

Обратите внимание, при использовании стрелочной функции в определении вычисляемого свойства, this не будет указывать на экземпляр компонента, но к нему можно получить доступ из первого аргумента функции:

  computed: {
    aDouble: vm => vm.a * 2
  }

Вычисляемые свойства кэшируются и повторно вычисляются только при изменении реактивных зависимостей. Обратите внимание, если определённая зависимость выходит за область видимости экземпляра (т.е не реактивная), то вычисляемое свойство не будет обновляться.

Пример:

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // если свойство только возвращает данные, достаточно простой функции:
    aDouble: function () {
      return this.a * 2
    },
    // свойство и возвращает, и получает данные:
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

См. также: Вычисляемые свойства

methods

Тип: { [key: string]: Function }
Подробности:

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

Не используйте стрелочные функции при определении методов (например, plus: () => this.a++). Стрелочные функции связываются с родительским контекстом, поэтому this будет указывать не на экземпляр Vue, и this.a окажется неопределённым.

Пример:

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

См. также: Обработка событий

watch

Тип: { [key: string]: string | Function | Object | Array }
Подробности:

Объект, ключи которого — выражения для наблюдения, а значения — обратновызовы, вызываемые при их изменении. Значения также могут быть строками с именами методов, или объектами, содержащими дополнительные настройки. Экземпляр Vue вызовет $watch() соответствующий каждому ключу объекта при своём создании.

Пример:

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('новое значение: %s, старое значение: %s', val, oldVal)
    },
    // строка с именем метода:
    b: 'someMethod',
    // Обратновызов будет вызываться каждый раз, когда изменяется любое из свойств
    // наблюдаемого объекта, независимо от глубины их вложенности
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // обратновызов будет вызван сразу же после начала наблюдения
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // можно передать массив обратновызовов, они будут вызываться один за одним
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // отслеживание значения `vm.e.f`: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => новое значение: 2, старое значение: 1

Не используйте стрелочные функции при указании методов наблюдателей (например, searchQuery: newValue => this.updateAutocomplete(newValue)). Стрелочные функции связываются с родительским контекстом, поэтому this будет указывать не на экземпляр Vue, и this.updateAutocomplete окажется неопределённым.

См. также: Методы экземпляра — vm.$watch

Настройки — DOM

el

Тип: string | Element
Ограничение: учитывается только при создании экземпляра выражением new.
Подробности:

Указывает в какой существующий DOM-элемент устанавливать экземпляр Vue. Может быть как строковым CSS-селектором, так и объектом типа HTMLElement.

После установки экземпляра, переданный или найденный по CSS-селектору элемент будет доступен через vm.$el.

Если эта настройка указана при создании экземпляра, компиляция начинается сразу. В остальных случаях, вызовите vm.$mount(), чтобы запустить компиляцию.

Предоставленный элемент служит только точкой подключения. В отличие от Vue 1.x, он обязательно будет заменяться DOM-ом, сгенерированным Vue. Поэтому не стоит подключать в корневые элементы <html> или <body>.

Если не указана render-функция и отсутствует настройка template, то в качестве шаблона будет использовано HTML-содержимое DOM-элемента точки подключения. В этом случае требуется сборка Runtime + Компилятор.

См. также:
- Диаграмма жизненного цикла
- Runtime + Компилятор vs. Runtime-only

template

Тип: string
Подробности:

Строковый шаблон с разметкой для экземпляра Vue. Этот шаблон заменяет элемент в точке монтирования. Вся существующая разметка в точке монтирования будет проигнорирована, если в шаблоне нет слота для распределения содержимого.

Если строка начинается с #, она будет использована как querySelector, а в качестве строкового шаблона использоваться innerHTML элемента с указанным id. Таким образом можно подключать шаблоны из тегов <script type="x-template">.

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

Если в настройках Vue указана render-функция, шаблон будет проигнорирован.

См. также:
- Диаграмма жизненного цикла
- Распределение содержимого слотами

render

Тип: (createElement: () => VNode) => VNode
Подробности:

Альтернатива строковым шаблонам, позволяющая использовать все алгоритмические возможности JavaScript. Render-функция получает первым аргументом метод createElement, необходимый для создания элементов VNode (виртуальных узлов).

Для функциональных компонентов вторым параметром будет context для доступа к контекстным данным, поскольку у функциональных компонентов нет экземпляров.

Функция в настройке render имеет приоритет над render-функцией, скомпилированной из настройки template и над HTML-шаблоном расположенным в точке монтирования, указанной в настройке el.

См. также: Render-функции и JSX

renderError

Добавлено в версии 2.2.0+

Тип: (createElement: () => VNode, error: Error) => VNode
Подробности:

Работает только в режиме разработки.

Предоставляет альтернативное отображение если render-функция встречается с ошибкой. Ошибка будет передана в renderError в качестве второго аргумента. Это может пригодиться при использовании вместе с горячей перезагрузкой модулей.

Пример:

new Vue({
  render (h) {
    throw new Error('oops')
  },
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
}).$mount('#app')

См. также: Render-функции и JSX

Настройки-перехватчики жизненного цикла

Перехватчик (hook — буквально «крючок») — функция, вызываемая в определённый момент жизненного цикла, например, непосредственно перед или после создания компонента.

Все перехватчики жизненного цикла автоматически привязывают контекст this к экземпляру Vue, чтобы получить доступ к данным, вычисляемым свойствами и методами. Не используйте стрелочные функции для определения хуков жизненного цикла (например, created: () => this.fetchTodos()). Поскольку стрелочные функции связываются с родительским контекстом, this будет указывать не на экземпляр Vue, и this.fetchTodos окажется неопределённым.

beforeCreate

Тип: Function
Подробности:

Вызывается синхронно сразу после инициализации экземпляра, до настройки наблюдения за данными, механизмов слежения и событий.
См. также: Диаграмма жизненного цикла

created

Тип: Function
Подробности:

Вызывается синхронно сразу после создания экземпляра. На этом этапе экземпляр закончил обработку настроек и настроил наблюдение за данными, вычисляемые свойства, методы, обратновызовы слежения и событий. Однако, фаза монтирования ещё не начата, и свойство $el ещё не доступно.

См. также: Диаграмма жизненного цикла

beforeMount

Тип: Function
Подробности:

Вызывается перед началом монтирования, перед первым вызовом функции render.

Не вызывается при отрисовке на стороне сервера.
См. также: Диаграмма жизненного цикла

mounted

Тип: Function
Подробности:

Вызывается сразу после монтирования экземпляра, когда взамен el создан vm.$el. Если корневой экземпляр смонтирован на элемент документа, vm.$el тоже будет элементом документа.

Обратите внимание, что mounted не гарантирует что все дочерние компоненты будут уже примонтированы. Если необходимо подождать пока не будут отрисованы все дочерние, можно воспользоваться vm.$nextTick внутри mounted:

  mounted: function () {
    this.$nextTick(function () {
      // Код, который будет запущен только после
      // отображения всех представлений
    })
  }

Не вызывается при отрисовке на стороне сервера.

См. также: Диаграмма жизненного цикла

beforeUpdate

Тип: Function
Подробности:

Вызывается при изменении данных перед тем, как DOM будет обновляться. Это хорошее место для получения доступа к существующему DOM перед обновлением, например чтобы удалить добавленные слушатели событий.

Не вызывается при отрисовке на стороне сервера, потому что на сервере выполняется только начальная отрисовка.

См. также: Диаграмма жизненного цикла

updated

Тип: Function
Подробности:

Вызывается после того, как виртуальный DOM был обновлён из-за изменения данных.

DOM компонента будет уже обновлён к моменту вызова этого перехватчика, поэтому вы можете выполнять здесь операции связанные с DOM. Тем не менее, старайтесь избегать изменения состояния в этом перехватчике. Для реагирования на изменения состояния лучше использовать вычисляемые свойства или отслеживание с помощью watch.

Обратите внимание, что updated не гарантирует что все дочерние компоненты будут уже переотрисованы. Если необходимо подождать пока все не будут повторно отрисованы, можно воспользоваться vm.$nextTick внутри updated:

  updated: function () {
    this.$nextTick(function () {
      // Код, который будет запущен только после
      // обновления всех представлений
    })
  }

Не вызывается при отрисовке на стороне сервера.

См. также: Диаграмма жизненного цикла

activated

Тип: Function
Подробности:

Вызывается при активации компонента внутри <keep-alive>.

Не вызывается при отрисовке на стороне сервера.
См. также:
- Встроенные компоненты — keep-alive
- Динамические и асинхронные компоненты — keep-alive с динамическими компонентами

deactivated

Тип: Function
Подробности:

Вызывается после деактивации компонента внутри <keep-alive>.

Не вызывается при отрисовке на стороне сервера.
См. также:
- Встроенные компоненты — keep-alive
- Динамические и асинхронные компоненты — keep-alive с динамическими компонентами

beforeDestroy

Тип: Function
Подробности:

Вызывается перед уничтожением экземпляра Vue. На этом этапе экземпляр всё ещё полностью функционален.

Не вызывается при отрисовке на стороне сервера.
См. также: Диаграмма жизненного цикла

destroyed

Тип: Function
Подробности:

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

Не вызывается при отрисовке на стороне сервера.

См. также: Диаграмма жизненного цикла

errorCaptured

Добавлено в версии 2.5.0+

Тип: (err: Error, vm: Component, info: string) => ?boolean
Подробности:

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

Вы можете изменить состояние компонента в этом перехватчике. Тем не менее, важно иметь в вашем шаблоне или render-функции условия, которые оборачивают другое содержимое при обнаружении ошибки; иначе компонент может попасть в бесконечный цикл отрисовки.

Правила распространения ошибок

По умолчанию все ошибки по-прежнему отправляются в глобальный обработчик config.errorHandler, если он был определён, поэтому эти ошибки всё равно могут быть отправлены например в сервис сбора аналитики из одного места в коде.
Если существует несколько перехватчиков errorCaptured в цепочке наследования компонента или родительской цепочке, то все они будут вызваны с той же ошибкой.
Если сам перехватчик errorCaptured выбрасывает ошибку, то обе этих ошибки (зафиксированная и выброшенная перехватчиком) будут отправлены в глобальный обработчик config.errorHandler.
Перехватчик errorCaptured может возвращать false чтобы предотвратить дальнейшее распространение ошибки. Это по существу означает «эта ошибка была обработана и её следует игнорировать». Это предотвратит вызов дополнительных перехватчиков errorCaptured или глобального обработчика config.errorHandler для этой ошибки.

Настройки — ресурсы

directives

Тип: Object
Подробности:

Хэш директив, доступных экземпляру Vue.
См. также: Пользовательские директивы

filters

Тип: Object
Подробности:

Хэш фильтров, доступных экземпляру Vue.
См. также: Vue.filter

components

Тип: Object
Подробности:

Хэш компонентов, доступных экземпляру Vue.
См. также: Компоненты

Настройки — композиция

parent

Тип: экземпляр Vue
Подробности:

Определяет родительский экземпляр для создаваемого. Устанавливает отношение «родитель-потомок» между ними. Родитель будет доступен дочернему экземпляру посредством this.$parent, а дочерний экземпляр будет добавлен в массив $children родителя.

Старайтесь реже использовать $parent и $children — этот механизм мы предусмотрели на крайний случай. Для общения между родителем и ребёнком лучше использовать входные параметры и события.

mixins

Тип: Array<Object>
Подробности:

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

Перехватчики примесей вызываются в порядке их определения, до вызова собственных перехватчиков компонента.

Пример:

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

См. также: Примеси

extends

Тип: Object | Function
Подробности:

Позволяет декларативно наследоваться от другого компонента (который может быть либо простым объектом, либо конструктором), не используя Vue.extend. Главным образом предназначено для облегчения наследования между компонентами, определёнными в одном файле.

Эта функциональность аналогична mixins.

Пример:

var CompA = { ... }

// наследуем от CompA, не вызывая `Vue.extend`:
var CompB = {
  extends: CompA,
  ...
}

provide / inject

Добавлено в версии 2.2.0+

Тип:
- provide: Object | () => Object
- inject: Array<string> | { [key: string]: string | Symbol | Object }
Подробности:

provide и inject в первую очередь предназначены для особых случаев использования в добавках или компонентах библиотек. Их не рекомендуется использовать в коде приложения.

Эта пара настроек используется вместе, чтобы позволить компоненту-родителю внедрять зависимости во всех его компонентах-потомках, независимо от того, насколько глубоко в иерархии они находятся, пока они находятся в той же самой родительской цепочке. Если вы знакомы с React, это очень похоже на функцию контекста.

Настройка provide должна быть объектом или функцией, возвращающей объект. Этот объект содержит свойства, которые будут доступны для внедрения в их потомках. Вы можете использовать ES2015 Symbols в качестве ключей этого объекта, но только в окружениях, которые родно поддерживают Symbol и Reflect.ownKeys.

Настройка inject должна быть:

массивом строк, или
объектом, где ключи стоят для местного связывания имени, а значение является:
- ключом (string или Symbol) для поиска в доступных инъекциях, или - объектом, где: - свойство from является ключом (string или Symbol) для поиска в доступных инъекциях, и - свойство default используется как резервное значение
Примечание: привязки provide и inject НЕ РЕАКТИВНЫ. Это сделано намеренно. Тем не менее, если вы передаёте вниз отслеживаемый объект, свойства на этом объекте остаются реактивными.

Пример:

// родительский компонент предоставляет доступ к 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// дочерний компонент внедряет 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

С помощью ES2015 Symbols, функция provide и объект inject:

const s = Symbol()

const Provider = {
  provide () {
    return {
      [s]: 'foo'
    }
  }
}

const Child = {
  inject: { s },
  // ...
}

Следующие два примера работают в версии Vue 2.2.1+. Ниже этой версии, внедрённые значения устанавливаются после инициализации props и data.

Использование внедрённого значения, значением по умолчанию для входных данных:

const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

Использование внедрённого значения в качестве данных:

const Child = {
  inject: ['foo'],
  data () {
    return {
      bar: this.foo
    }
  }
}

С версии 2.5.0+ инъекции могут быть необязательными со значением по умолчанию:

const Child = {
  inject: {
    foo: { default: 'foo' }
  }
}

Если потребуется внедрить значение из свойства с другим именем, используйте from для обозначения свойства-источника:

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

Аналогично значениям по умолчанию входных параметров, вам нужно использовать функцию фабрику для не-примитивных значений:

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

Настройки — разное

name

Тип: string
Ограничение: учитывается только при определении компонента.
Подробности:

Название компонента. Позволяет компоненту рекурсивно вызывать самого себя в шаблоне. Обратите внимание что когда компонент регистрируется глобально посредством Vue.component(), глобальный ID автоматически устанавливается равным его имени.

Кроме того, компоненты с указанным name проще отлаживать из-за более понятных сообщений в консоли. Во Vue-devtools все безымянные компоненты довольно неинформативно называются <AnonymousComponent>. Указание имён для компонентов значительно улучшает ситуацию.

delimiters

Тип: Array<string>
По умолчанию: ["{{", "}}"]
Ограничения: Этот параметр доступна только в полной сборке, поддерживающей компиляцию шаблонов в обозревателе.
Подробности:

Разделители, выделяющие текст для интерполяции.

Пример:

new Vue({
  delimiters: ['${', '}']
})

// Разделители изменены на стиль строк-шаблонов в ES6

functional

Тип: boolean
Подробности:

Превращает компонент в функциональный, то есть не имеющий собственного состояния (data) и своего экземпляра (this). Такие компоненты по сути — просто render-функция, возвращающая узлы виртуального DOM. Это сильно ускоряет их отрисовку.
См. также: Функциональные компоненты

model

Добавлено в версии 2.2.0+

Тип: { prop?: string, event?: string }
Подробности:

Позволяет настроить входной параметр и событие, используемые для работы v-model. По умолчанию, v-model на компоненте использует входной параметр value и событие input. Но для некоторых типов полей, таких как флажки и радиокнопки, может потребоваться использовать входной параметр value для других целей. Использование настройки model позволит избежать конфликта в таких случаях.

Пример:

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // это позволит использовать входной параметр `value` для других целей
    value: String,
    // используйте `checked` в качестве параметра, который заменяет `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

Указанное выше равно:

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

inheritAttrs

Добавлено в версии 2.4.0+

Тип: boolean
По умолчанию: true
Подробности:

По умолчанию атрибуты из родительской области видимости, которые не были распознаны как входные параметры, будут «проваливаться» и применяться к корневому элементу дочернего компонента как обычные HTML-атрибуты. При создании компонента, который оборачивает элемент или другой компонент, это не всегда может быть ожидаемым поведением. Устанавливая inheritAttrs в false, это поведение по умолчанию может быть отключено. Атрибуты доступны через свойство экземпляра $attrs (также добавленное в версии 2.4.0) и могут быть явно привязаны к некорневому элементу с использованием v-bind.

Примечание: эта настройка не влияет на привязки class и style.

comments

Добавлено в версии 2.4.0+

Тип: boolean
По умолчанию: false
Ограничения: Эта настройка доступна только в полной сборке, поддерживающей компиляцию шаблонов в обозревателе.
Подробности:

Когда установлено в значение true, будут сохраняться и отрисовываться HTML-комментарии, найденные в шаблонах. Поведение по умолчанию выбрасывает их.

Свойства экземпляра

vm.$data

Тип: Object
Подробности:

Объект с данными, над которым экземпляр Vue осуществляет наблюдение. Экземпляр прокидывает сюда вызовы своих полей. (Например, vm.a будет указывать на vm.$data.a)

См. также: Настройки — данные

vm.$props

Добавлено в версии 2.2.0+

Тип: Object
Подробности:

Объект, предоставляющий доступ к текущим входным данным компонента. Экземпляр Vue прокидывает доступ к свойствам своего объекта входных данных.

vm.$el

Тип: Element
Только для чтения
Подробности:

Корневой элемент DOM, управляемый экземпляром Vue.

vm.$options

Тип: Object
Только для чтения
Подробности:

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

  new Vue({
    customOption: 'что-нибудь',
    created: function () {
      console.log(this.$options.customOption) // => 'что-нибудь'
    }
  })

vm.$parent

Тип: экземпляр Vue
Только для чтения
Подробности:

Экземпляр родителя, если он есть у текущего экземпляра.

vm.$root

Тип: экземпляр Vue
Только для чтения
Подробности:

Корневой экземпляр Vue текущего дерева компонентов. Если у экземпляра нет родителя, в этом поле будет он сам.

vm.$children

Тип: Array<экземпляр Vue>
Только для чтения
Подробности:

Компоненты-потомки экземпляра. Обратите внимание, что порядок следования элементов в $children не гарантируется, и этот массив не реактивен. Вместо того, чтобы использовать $children для связывания данных, попробуйте использовать обычный массив и директиву v-for для создания дочерних компонентов, и используйте этот массив как «источник истины».

vm.$slots

Тип: { [name: string]: ?Array<VNode> }
Только для чтения
Реактивны? Нет
Подробности:

Используется для доступа к содержимому, указанному через слоты. У каждого именованного слота есть соответствующее значение (например, содержимое slot="foo" попадёт в vm.$slots.foo). Свойство default содержит узлы, не включённые в именованные слоты, либо содержимое v-slot:default.

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

Примечание: v-slot:foo поддерживается в версии v2.6+. Для более старых версий вы можете использовать устаревший синтаксис.

Особенно полезно vm.$slots в компонентах с render-функциями.

Пример:

<blog-post>
  <template v-slot:header>
    <h1>Обо мне</h1>
  </template>

  <p>Это содержимое попадёт в vm.$slots.default, потому что он не в именованном слоте.</p>

  <template v-slot:footer>
    <p>Copyright 2016 Evan You</p>
  </template>

  <p>Это содержимое тоже попадёт в vm.$slots.default.</p>.
</blog-post>

Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header
    var body   = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header),
      createElement('main', body),
      createElement('footer', footer)
    ])
  }
})

vm.$scopedSlots

Добавлено в версии 2.1.0+

Тип: { [name: string]: props => Array<VNode> | undefined }
Только для чтения
Подробности:

Используется для доступа к содержимому, указанному через слоты с ограниченной областью видимости. Для каждого слота, включая и слот default, объект содержащий соответствующую функцию, что возвращает VNode.

Использование vm.$scopedSlots наиболее полезно при написании компонентов с использованием рисующей-функций.

Примечание: начиная с версии 2.6.0+ есть два важных изменения этого свойства:

Функции слотов с ограниченной областью видимости теперь гарантированно возвращают массив VNodes, за исключением когда возвращаемое свойство является недействительным, в таком случае функция вернёт undefined.
Все $slots теперь также доступны в $scopedSlots как функции. Если вы работаете с рисующими-функциями, рекомендуем всегда обращаться к слотам через $scopedSlots, независимо от того, используют ли они свою область видимости в настоящее время или нет. Это не только упростит будущие изменения при переработке слота, но и облегчит переезд на Vue 3, где все слоты будут функциями.

См. также:

vm.$refs

Тип: Object
Только для чтения
Подробности:

Объект из DOM-элементов и экземпляров компонентов, зарегистрированных с помощью атрибутов ref.
См. также:
Доступ к экземплярам дочерних компонентов и элементов
- Специальный атрибут — ref

vm.$isServer

Тип: boolean
Только для чтения
Подробности:

Запущен ли данный экземпляр Vue на сервере.
См. также: SSR. Отрисовка на стороне сервера

vm.$attrs

Добавлено в версии 2.4.0+

Тип: { [key: string]: string }
Только для чтения
Подробности:

Содержит нераспознанные атрибуты (за исключением class и style), указанные для компонента в родительской области видимости. Если у компонента нет объявленных входных параметров, здесь окажутся все атрибуты (кроме class и style). Эти атрибуты можно передавать вниз во внутренние компоненты через v-bind="$attrs" — что может быть полезным при создании компонентов высшего порядка (HOC).

vm.$listeners

Добавлено в версии 2.4.0+

Тип: { [key: string]: Function | Array<Function> }
Только для чтения
Подробности:

Содержит обработчики событий v-on из родительской области видимости (без изменителей .native). Они могут быть переданы во внутренние компоненты через v-on="$listeners" — что может быть полезным при создании прозрачных обёрток компонентов.

Методы экземпляра — данные

vm.$watch( expOrFn, callback, [options] )

Аргументы:
- {string | Function} expOrFn
- {Function | Object} callback
- {Object} [options]
  - {boolean} deep
  - {boolean} immediate
Возвращает: {Function} unwatch
Использование:

Запускает наблюдение за выражением или вычисляемой функцией на предмет изменений. В параметры обратновызова будут переданы новое и старое значения отслеживаемого объекта. Выражение может быть только простым путём до переменной с разделителями-точками. Для более сложных случаев используйте функцию.

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

Пример:

// следим за переменной, указанной путём:
vm.$watch('a.b.c', function (newVal, oldVal) {
  // переменная изменилась, сделайте что-нибудь
})

// следим за функцией:
vm.$watch(
  function () {
    // Данный обработчик будет вызываться каждый раз, когда выражение
    // `this.a + this.b` даёт результат. Это похоже на отслеживание
    // вычисляемого свойства без определения самого вычисляемого свойства
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // значение функции изменилось, сделайте что-нибудь
  }
)

vm.$watch возвращает функцию unwatch, которая останавливает слежение:

var unwatch = vm.$watch('a', cb)
// позднее, останавливаем слежение:
unwatch()

Настройка: deep

Чтобы слежение реагировало на изменения во вложенных объектах, передайте deep: true в объекте параметров. Обратите внимание, что для наблюдения за изменениями массивов этого не требуется.

  vm.$watch('someObject', callback, {
    deep: true
  })
  vm.someObject.nestedValue = 123
  // вызывается callback

Настройка: immediate

Если передано immediate: true, обратновызов будет вызван сразу же после начала наблюдения с текущим значением выражения:

  vm.$watch('a', callback, {
    immediate: true
  })
  // `обратновызов` вызывается сразу, с текущим значением `a`

Обратите внимание, при использовании настройки immediate нет возможности отменить отслеживание указанного свойства в обратновызове вызванном в первый раз.

  // Подобное приведёт к ошибке
  var unwatch = vm.$watch(
    'value',
    function () {
      doSomething()
      unwatch()
    },
    { immediate: true }
  )

Если необходимо вызвать функцию unwatch внутри обратновызова, то следует проверять её доступность:

  var unwatch = vm.$watch(
    'value',
    function () {
      doSomething()
      if (unwatch) {
        unwatch()
      }
    },
    { immediate: true }
  )

vm.$set( target, propertyName/index, value )

Аргументы:
- {Object | Array} target
- {string | number} propertyName/index
- {any} value
Возвращает: установленное значение.
Использование:

Псевдоним глобального метода Vue.set.
См. также: Vue.set

vm.$delete( target, propertyName/index )

Аргументы:
- {Object | Array} target
- {string | number} propertyName/index
Использование:

Псевдоним глобального метода Vue.delete.
См. также: Vue.delete

Методы экземпляра — события

vm.$on( event, callback )

Аргументы:
- {string | Array<string>} event (массив поддерживается только в версиях 2.2.0+)
- {Function} callback
Использование:

Создаёт подписку на пользовательское событие текущего vm. Такое событие можно породить функцией vm.$emit. Обратновызов получит все дополнительные аргументы, переданные этому методу.

Пример:

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'привет')
// => "привет"

vm.$once( event, callback )

Аргументы:
- {string} event
- {Function} callback
Использование:

Создаёт подписку на пользовательское событие, но срабатывает только один раз. После первого же использования подписчик будет удалён.

vm.$off( [event, callback] )

Аргументы:
- {string | Array<string>} event (массив поддерживается только в 2.2.2+)
- {Function} [callback]
Использование:

Удаляет пользовательские подписчики события.
- Если функция вызвана без параметров, она удалит все подписки на события;
- Если указан только тип события — удалит все подписки указанного события;
- Если указан и тип события, и обратновызов — будет удалена именно эта подписка именно этого события.

vm.$emit( eventName, […args] )

Аргументы:
- {string} eventName
- [...args]

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

Примеры:

Использование $emit только с именем события:

Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Нажмите для приветствия
    </button>
  `
})

<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>

new Vue({
  el: '#emit-example-simple',
  methods: {
    sayHi: function () {
      alert('Привет!')
    }
  }
})

Использование $emit с дополнительными аргументами:

  Vue.component('magic-eight-ball', {
    data: function () {
      return {
        possibleAdvice: ['Да', 'Нет', 'Может быть']
      }
    },
    methods: {
      giveAdvice: function () {
        var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
        this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
      }
    },
    template: `
      <button v-on:click="giveAdvice">
        Делать или нет?
      </button>
    `
  })

  <div id="emit-example-argument">
    <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
  </div>

  new Vue({
    el: '#emit-example-argument',
    methods: {
      showAdvice: function (advice) {
        alert(advice)
      }
    }
  })

Методы экземпляра — жизненный цикл

vm.$mount( [elementOrSelector] )

Аргументы:
- {Element | string} [elementOrSelector]
- {boolean} [hydrating]
Возвращает: vm — сам экземпляр
Использование:

Если при создании экземпляра Vue не была указана настройка el, он окажется в «непримонтированном» (unmounted) состоянии, то есть без ассоциированного элемента DOM. Вызовите vm.$mount(), чтобы примонтировать такой экземпляр.

Если параметр elementOrSelector не указан, шаблон будет отрисован как элемент вне документа. Вы сможете затем вставить такой элемент родным методом DOM.

Метод возвращает сам экземпляр, чтобы вы могли вызывать дополнительные методы по цепочке.

Пример:

var MyComponent = Vue.extend({
  template: '<div>Привет!</div>'
})

// создаём и монтируем в #app (заменит #app):
new MyComponent().$mount('#app')

// другой вариант записи, делает то же самое:
new MyComponent({ el: '#app' })

// отрисовываем вне документа и вставляем в DOM позднее:
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

См. также:
- Диаграмма жизненного цикла
- SSR. Отрисовка на стороне сервера

vm.$forceUpdate()

Использование:

Заставляет экземпляр Vue произвести переотрисовку. Обратите внимание, что этот метод затронет не все дочерние компоненты, а только сам экземпляр и дочерние компоненты со слотами содержимого.

vm.$nextTick( [callback] )

Аргументы:
- {Function} [callback]
Использование:

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

Добавлено в версии 2.1.0+: возвращает Promise, если окружение их поддерживает и обратновызов не указан. Обратите внимание, что Vue не поставляется с модернизатором для Promise. Поэтому при необходимости поддержки обозревателей, которые не поддерживают их родно (например, IE), вам придётся предоставить модернизатор самостоятельно.

Пример:

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // меняем данные:
      this.message = 'changed'
      // DOM ещё не обновлён
      this.$nextTick(function () {
        // теперь DOM обновлён
        // `this` указывает на текущий экземпляр
        this.doSomethingElse()
      })
    }
  }
})

См. также:
- Vue.nextTick
- Асинхронная очередь обновлений

vm.$destroy()

Использование:

Полностью уничтожает vm. Очищает связи с другими существующими vm, отвязывает директивы, отменяет все подписки на события.

Вызывает перехватчики beforeDestroy и destroyed.

Как правило, вам не придётся вызывать этот метод самим. Лучше контролировать жизненный цикл дочерних компонентов в data-driven стиле директивами v-if и v-for.

См. также: Диаграмма жизненного цикла

Директивы

v-text

Принимает: string
Подробности:

Управляет текстовым содержимым элемента (textContent). Если вам нужно управлять только частью содержимого тега, используйте интерполяцию {{ Mustache }}.

Пример:

  <span v-text="msg"></span>
  <!-- то же, что -->
  <span>{{msg}}</span>

См. также: Синтаксис шаблонов — интерполяции

v-html

Принимает: string
Подробности:

Управляет HTML-содержимым элемента (innerHTML). Обратите внимание, что содержимое вставляется как обычный HTML — то есть не компилируется как шаблон Vue. Не стоит организовывать вложенные шаблоны с помощью v-html, попробуйте лучше применить компоненты.

Динамическая отрисовка произвольного HTML-кода на сайте — это очень опасная практика, легко приводящая к XSS-уязвимостям. Передавайте в v-html только содержимое, которому можно доверять, и никогда — необработанный пользовательский ввод.

В однофайловых компонентах scoped стили не будут применены к содержимому внутри v-html, потому что этот HTML не обрабатывается компилятором шаблонов Vue. Если вы хотите стилизовать содержимое v-html с помощью местного CSS, то вы можете вместо этого использовать CSS-модули или дополнительный глобальный элемент <style> с иной стратегией, такой как БЭМ.

Пример:
```
<div v-html="html"></div>
```
См. также: Синтаксис шаблонов — интерполяции

v-show

Принимает: any
Использование:

Переключает CSS-свойство display элемента, в зависимости от того, истинно ли указанное выражение.

При изменении состояния этой директивы вызываются анимации, заданные в transition.
См. также: Условная отрисовка — v-show

v-if

Принимает: any
Использование:

Осуществляет отрисовку элемента, только если передаваемое выражение истинно. При изменении значения выражения на противоположное, элемент и содержащиеся в нём компоненты и директивы уничтожаются/пересоздаются. Если элемент — <template>, вместо него будет отрисовано его содержимое.

Эта директива также запускает анимационные переходы при изменении условия.

При совместном использовании v-if и v-for, v-for имеет более высокий приоритет. Подробности на странице отрисовки списков.

См. также: Условная отрисовка — v-if

v-else

Не принимает какое-либо выражение
Ограничение: предыдущий элемент должен иметь директиву v-if или v-else-if.

Использование:

Определяет «блок else» для v-if или цепочки v-if/v-else-if.

<div v-if="Math.random() > 0.5">
  Сейчас меня видно
</div>
<div v-else>
  А сейчас — нет
</div>

См. также: Условная отрисовка — v-else

v-else-if

Добавлено в версии 2.1.0+

Принимает: any
Ограничение: предшествующий элемент должен иметь v-if или v-else-if.

Использование:

Обозначает «блок else if» для v-if. Можно объединять в цепочки.

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Не A/B/C
</div>

См. также: Условная отрисовка — v-else-if

v-for

Принимает: Array | Object | number | string | Iterable (с версии 2.6)
Использование:

Многократно отрисовывает элемент или блок шаблона, основываясь на переданных данных. Значение директивы должно следовать синтаксису alias in expression — в alias будет элемент текущего прохода цикла:

  <div v-for="item in items">
    {{ item.text }}
  </div>

Кроме того, вы можете указать название для индекса (или ключа, если вы работаете с объектом):

  <div v-for="(item, index) in items"></div>
  <div v-for="(val, key) in object"></div>
  <div v-for="(val, name, index) in object"></div>

По умолчанию v-for будет пытаться обновить элементы «на месте», не перемещая их. Если вам нужно, чтобы элементы перемещались, сохраняя явную упорядоченность, укажите атрибут key:

  <div v-for="item in items" :key="item.id">
    {{ item.text }}
  </div>

С версии 2.6.0+, v-for также может работать со значениями, реализующими протокол Iterable, включая родные Map и Set. К сожалению, Vue 2.x в настоящее время не поддерживает реактивность для значений Map и Set и поэтому не сможет автоматически отслеживать изменения в них.

Использование v-for подробно описано в секции руководства по ссылке ниже.

См. также:
- Отрисовка списков
- key

v-on

Сокращение: @
Принимает: Function | Inline-выражение | Object
Параметр: event
Модификаторы:
- .stop — вызовет event.stopPropagation().
- .prevent — вызовет event.preventDefault().
- .capture — добавит подписку в режиме capture.
- .self — вызовет обработчик только если событие возникло непосредственно на этом элементе.
- .{keyCode | keyAlias} — вызывает обработчик только при нажатии определённой клавиши.
- .native — подписаться на родное событие на корневом элементе компонента.
- .once — вызовет обработчик не больше одного раза.
- .left - (2.2.0) вызов обработчика только по событию нажатия левой кнопки мыши.
- .right - (2.2.0) вызов обработчика только по событию нажатия правой кнопки мыши.
- .middle - (2.2.0) вызов обработчика только по событию нажатия средней кнопки мыши.
- .passive - (2.3.0+) вызов обработчика события dom с параметром { passive: true }.
Использование:

Прикрепляет к элементу подписчик события. Тип события указывается в параметре. Выражение может быть именем метода, встрочное-выражением или вовсе отсутствовать, если указан один или несколько изменителей.

У обычного элемента можно подписаться только на родные события DOM. У элемента компонента можно подписаться на пользовательские события, вызываемые этим дочерним компонентом.

При работе с родными событиями DOM, метод получает родное событие единственным аргументом. В inline-выражениях, можно получить к нему доступ с помощью $event: v-on:click="handle('aga', $event)".

Начиная с версии 2.4.0+, v-on также поддерживает привязку к объекту пар событие/обработчик без аргумента. Обратите внимание, что при использовании синтаксиса объекта не поддерживаются никакие изменители.

Пример:

<!-- обработчик метода -->
<button v-on:click="doThis"></button>

<!-- динамическое имя события (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- inline-выражение -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- сокращённая запись -->
<button @click="doThis"></button>

<!-- сокращённая запись динамического имени события (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- изменитель stop propagation -->
<button @click.stop="doThis"></button>

<!-- изменитель prevent default -->
<button @click.prevent="doThis"></button>

<!-- изменитель prevent default без дополнительных действий -->
<form @submit.prevent></form>

<!-- цепочка из изменителей -->
<button @click.stop.prevent="doThis"></button>

<!-- изменитель клавиши keyAlias -->
<input @keyup.enter="onEnter">

<!-- изменитель клавиши keyCode -->
<input @keyup.13="onEnter">

<!-- обработчик метода будет вызван не больше одного раза -->
<button v-on:click.once="doThis"></button>

<!-- синтаксис объекта (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

Подписка на пользовательское событие в дочернем элементе (обработчик вызывается, когда дочерний элемент вызывает “my-event”):

  <my-component @my-event="handleThis"></my-component>

  <!-- встрочное-выражение -->
  <my-component @my-event="handleThis(123, $event)"></my-component>

  <!-- подписываемся на родное событие в компоненте -->
  <my-component @click.native="onClick"></my-component>

См. также:
- Обработка событий
- Компоненты — Отправка сообщений родителям с помощью событий

v-bind

Сокращение: :
Принимает: any (если указан параметр) | Object (если параметр не указан)
Параметр: attrOrProp (вариативно)
Изменители:
- .prop — используется для связывания в качестве DOM-свойства, а не атрибута (в чём разница?). Если тег является компонентом, то .prop будет устанавливать свойство на $el компонента.
- .camel — (2.1.0+) преобразует имена атрибутов из kebab-case в camelCase.
- .sync — (2.3.0+) синтаксический сахар, который будет преобразован в обработчик v-on для обновления связанного значения.
Использование:

Динамически связывает атрибуты тега или входной параметр компонента с выражением.

При использовании с атрибутами class и style поддерживает массивы и объекты в качестве значений. Подробнее это описано в соответствующем руководстве по ссылке ниже.

Для правильного связывания входного параметра компонента, тот должен быть корректно определён в дочернем компоненте.

Если аргумент не указан, связанное значение может быть содержащим пары имя-значение. Обратите внимание, что в этом случае атрибуты class и style не поддерживают массивы и объекты.

Пример:

<!-- связывание атрибута -->
<img v-bind:src="imageSrc">

<!-- динамическое имя атрибута (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- сокращённая запись -->
<img :src="imageSrc">

<!-- сокращённая запись для динамического имени атрибута (2.6.0+) -->
<button :[key]="value"></button>

<!-- поддержка сложения строк -->
<img :src="'/path/to/images/' + fileName">

<!-- связывание CSS-класса -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- связывание местного стиля -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- связывание с объектом, содержащим атрибуты -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- связывание с атрибутами DOM при указании изменителя -->
<div v-bind:text-content.prop="text"></div>

<!-- связывание входного параметра. "prop" должен быть определён в my-component. -->
<my-component :prop="someThing"></my-component>

<!-- передача всех входных параметров компонента в child-component -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

Изменитель .camel позволяет перевод имени атрибута v-bind в camelCase при использовании DOM-шаблонов, например для атрибута viewBox SVG:

  <svg :view-box.camel="viewBox"></svg>

В использовании .camel нет необходимости, если вы пользуетесь строковыми шаблонами или vue-loader/vueify.

См. также:

v-model

Принимает: разное, в зависимости от типа форм или выходных данных компонентов
Используется только с:
- <input>
- <select>
- <textarea>
- компонентами
  
  Изменители:
- .lazy — подписаться на события change, а не input
- .number — приводить корректную введённую строку к числу
- .trim — удалять пробелы в начале и в конце введённой строки
Использование:

Двусторонним образом связывает элемент ввода данных или компонент с переменной. Директива подробно описана в руководстве по ссылке ниже.
См. также:
- Работа с формами
- Компоненты — Использование v-model на компонентах

v-slot

Сокращение: #
Принимает: JavaScript выражение, допустимое в позиции аргумента (можно использовать деструктуризацию в поддерживаемых окружениях). Вариативно — требуется только в случае, когда используются входные параметры у слота.
Параметр: имя слота (вариативно, по умолчанию default)
Ограничение:
- <template>
- компоненты (для одиночного слота по умолчанию с входными параметрами)
Использование:

Указывает именованные слоты или слоты с входными параметрами.
Пример:

  <!-- Именованные слоты -->
  <base-layout>
    <template v-slot:header>
      Содержимое заголовка
    </template>

    Содержимое слота по умолчанию

    <template v-slot:footer>
      Содержимое подвала
    </template>
  </base-layout>

  <!-- Именованный слот с входными параметрами -->
  <infinite-scroll>
    <template v-slot:item="slotProps">
      <div class="item">
        {{ slotProps.item.text }}
      </div>
    </template>
  </infinite-scroll>

  <!-- Слот по умолчанию с входными параметрами, с использованием деструктурирования -->
  <mouse-position v-slot="{ x, y }">
    Позиция курсора: {{ x }}, {{ y }}
  </mouse-position>

Более подробно можно изучить по ссылкам ниже.

См. также:
- Компоненты — Слоты
- RFC-0001

v-pre

Не принимает какое-либо выражение
Использование:

Пропустить компиляцию для этого элемента и всех его потомков. Вы можете использовать это для отображения необработанных тегов {{}}. Кроме того, пропуск большого количества элементов может ускорить компиляцию.
Пример:

  <span v-pre>{{ эта часть не будет скомпилирована }}</span>

v-cloak

Не принимает какое-либо выражение
Использование:

Эта директива останется на элементе до тех пор, пока связанный с ним экземпляр Vue не закончит компиляцию. В сочетании с CSS-правилом [v-cloak] { display: none } этой директивой можно скрывать не скомпилированные шаблоны до тех пор, пока экземпляр Vue не будет готов.

Пример:
```
[v-cloak] {
  display: none;
}
```

  <div v-cloak>
    {{ message }}
  </div>

Элемент <div> не появится, пока компиляция не закончится.

v-once

Не принимает какое-либо выражение
Использование:

Однократно отрисовывает элемент или компонент. При повторной отрисовке он, а также все его потомки, рассматриваются как статическое содержимое и пропускаются. Это поможет увеличить производительность обновлений.
```

<span v-once>Это никогда не изменится: {{msg}}</span>


<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>


<my-component v-once :comment="msg"></my-component>


<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>
```
См. также:
- Синтаксис шаблонов — интерполяции
- Компоненты — дешёвые статические компоненты с v-once

Специальные атрибуты

key

Принимает: number | string | boolean (с версии 2.4.2) | symbol (с версии 2.5.12)

Атрибут key помогает алгоритму работы с виртуальным DOM определить, какие узлы соответствует какой строке данных. Если этот атрибут не указан, Vue использует алгоритм, уменьшающий перемещение элементов и старается обновить и повторно использовать как можно больше элементов правильного типа «на местах». А если ключ указан, Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей. Элементы, соответствующие ключам, которых больше нет, Vue всегда уничтожает.

Потомки одного и того же общего родителя должны иметь уникальные ключи. Повторяющиеся ключи приведут к ошибкам при отрисовке.

Как правило, используется в связке с v-for:

  <ul>
    <li v-for="item in items" :key="item.id">...</li>
  </ul>

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

Быть уверенным, что все перехватчики жизненного цикла компонента будут вызваны
Запускать анимации (например, установленные в transition)

Например:

  <transition>
    <span :key="text">{{ text }}</span>
  </transition>

При изменении text, <span> всегда будет заменяться целиком, что спровоцирует вызов анимации.

ref

Принимает: string

Название элемента или компонента для регистрации ссылки на него. В объекте $refs появится поле с названием из этого атрибута и значением: элементом DOM, если атрибут стоял на простом теге или экземпляром компонента, если атрибут стоял на пользовательском компоненте:
```


<p ref="p">hello</p>


<child-component ref="child"></child-component>
```
При использовании на элементах/компонентах с v-for, регистрируется массив ссылок на элементы DOM или экземпляры компонентов.

Важное замечание о времени регистрации ссылок: поскольку ссылки создаются render-функцией, вы не сможете использовать их при первичной отрисовке — на тот момент они ещё не существуют! Кроме того, объект $refs не является реактивным, поэтому не стоит пытаться использовать его в шаблонах для связывания данных.
См. также: Ссылки на компоненты-потомки

is

Принимает: string | Object (объект с настройками компонента)

Используется для динамически переключаемых компонентов и для обхода ограничений при использовании DOM-шаблонов.

Например:

  <!-- используемый компонент меняется при изменениях currentView -->
  <component v-bind:is="currentView"></component>

  <!-- необходим, потому что `<my-row>` будет считаться ошибочным -->
  <!-- элементом внутри `<table>` и будет вынесен выше             -->
  <table>
    <tr is="my-row"></tr>
  </table>

Подробности использования можно изучить по ссылкам ниже.

См. также:
- Динамическое переключение компонентов
- Особенности разбора DOM-шаблона

slot ^{устарело}

Предпочитайте использовать v-slot в 2.6.0+.

Принимает: string

Используется в содержимом дочерних компонентов для указания того, к какому из именованных слотов принадлежит отмеченное содержимое.

Подробнее в руководстве по ссылке ниже.
См. также: Именованные слоты

slot-scope ^{устарело}

Предпочитайте использовать v-slot в 2.6.0+.

Принимает: выражение аргумента функции
Использование:

Используется для обозначения элемента или компонента в качестве слота с ограниченной областью видимости. Значением атрибута должно быть правильное выражение JavaScript, которое может использоваться в качестве аргумента сигнатуры функции. Это означает, что в поддерживаемых окружениях вы также можете использовать деструктурирование ES2015 в выражении. Служит заменой для scope в версии 2.5.0+.

Этот атрибут не поддерживает динамические привязки.

См. также: Слоты с ограниченной областью видимости

scope ^{удалено}

Заменён на slot-scope в 2.5.0+. Предпочитайте использовать v-slot в 2.6.0+.

Используется для обозначения элемента <template> в качестве слота с ограниченной областью видимости, который заменён на slot-scope в версии 2.5.0+.

Использование:

Аналогично slot-scope за исключением того, что scope может использоваться только на элементах <template>.

Встроенные компоненты

component

Входные параметры:
- is — string ComponentDefinition ComponentConstructor
- inline-template — boolean

Использование:

«Метакомпонент» для отрисовки динамических компонентов. Настоящий компонент для отрисовки определяется параметром is:

<!-- динамический компонент, контролируемый -->
<!-- свойством vm `componentId` -->
<component :is="componentId"></component>

<!-- может также отрисовывать зарегистрированный или переданный параметром компонент -->
<component :is="$options.components.child"></component>

См. также: Динамическое переключение компонентов

transition

Входные параметры:

name — string, используется для автоматического создания имён CSS-классов для анимаций. Например, name: 'fade' автоматически раскроется в .fade-enter, .fade-enter-active и т. д. Значение по умолчанию — "v".
appear — boolean, вызывать ли анимацию при первой отрисовке. По умолчанию false.
css — boolean, применять ли CSS-классы. По умолчанию true. Если установить в false, будут вызываться только обработчики JavaScript, зарегистрированные для событий компонента.
type — string, указывает тип событий, с помощью которых определяется момент завершения анимации. Доступные значения: "transition" и "animation". По умолчанию автоматически выбирается тип, задающий наибольшую продолжительность.
mode — string, управляет порядком анимаций исчезновения и появления элементов. Доступные режимы "out-in" (сначала старый элемент исчезает, потом новый появляется) и "in-out" (сначала новый элемент появляется, потом исчезает старый). По умолчанию исчезновение и появление происходят одновременно.

duration - number { enter: number, leave: number }, указывает длительность перехода. По умолчанию Vue ожидает первого события transitionend или animationend на корневом элементе.

enter-class — string
leave-class — string
appear-class — string
enter-to-class — string
leave-to-class — string
appear-to-class — string
enter-active-class — string
leave-active-class — string
appear-active-class — string

События:
- before-enter
- before-leave
- before-appear
- enter
- leave
- appear
- after-enter
- after-leave
- after-appear
- enter-cancelled
- leave-cancelled (только для v-show)
- appear-cancelled

Использование:

Указывает анимацию перехода для одного элемента или компонента. <transition> не порождает дополнительного элемента DOM при отрисовке, и не отображается в иерархии компонентов в инспекторе. Этот компонент просто применяет поведение перехода к своему содержимому.

<!-- простой элемент -->
<transition>
  <div v-if="ok">переключаемое содержимое</div>
</transition>

<!-- динамический компонент -->
<transition name="fade" mode="out-in" appear>
  <component :is="view"></component>
</transition>

<!-- перехватчик на событие -->
<div id="transition-demo">
  <transition @after-enter="transitionComplete">
    <div v-show="ok">переключаемое содержимое</div>
  </transition>
</div>

new Vue({
  ...
  methods: {
    transitionComplete: function (el) {
      // сделайте что-нибудь с переданным элементом DOM ...
    }
  }
  ...
}).$mount('#transition-demo')

См. также: Анимация списков и появления/исчезновения

transition-group

Входные параметры:
- tag — string, по умолчанию используется span.
- move-class — переопределяет CSS-класс, применяемый во время анимации перемещения.
- те же атрибуты, что и у <transition> кроме mode.
События:
- те же, что и у <transition>.
Использование:

Указывает анимацию перехода для нескольких элементов или компонентов. <transition-group> превращается в реальный элемент DOM. По умолчанию для этого используется тег <span>, но можно указать любой другой в параметре tag.

Обратите внимание, что каждый потомок <transition-group> должен иметь уникальное значение key, чтобы анимации работали корректно.

Анимации перехода реализованы с помощью CSS-превращений. Когда позиция потомка изменилась после обновления, ему будет добавлен CSS-класс (автоматически созданный из атрибута name, или же явно указанный в атрибуте move-class). Если после применения этого класса свойство transform можно будет анимировать, элемент будет с плавным переходом переведён туда, где он должен быть с помощью техники FLIP.

  <transition-group tag="ul" name="slide">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </transition-group>

См. также: Анимация списков и появления/исчезновения

keep-alive

Props:
- include — строка, регулярное выражение или массив. Только компоненты с совпадающими именами будут кешироваться.
- exclude — строка, регулярное выражение или массив. Все компоненты с совпадающими именами не будут кэшироваться.
- max - число. Максимальное количество кэшируемых экземпляров.
Использование:

Оберните динамические компоненты тегом <keep-alive>, чтобы кэшировать экземпляры интерактивных компонентов вместо того, чтобы их уничтожать. Так же, как и <transition>, <keep-alive> — абстрактный компонент: при отрисовке он не превращается в элемент DOM, и не показывается в цепочке родителей компонента.

Когда компонент, расположенный внутри <keep-alive> показывается или скрывается, вызываются его перехватчики жизненного цикла activated или deactivated соответственно.

В версии 2.2.0+, activated и deactivated будет срабатывать для всех вложенных компонентов внутри <keep-alive> дерева.

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

  <!-- базовый вариант -->
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>

  <!-- несколько потомков -->
  <keep-alive>
    <comp-a v-if="a > 1"></comp-a>
    <comp-b v-else></comp-b>
  </keep-alive>

  <!-- использование вместе с `<transition>` -->
  <transition>
    <keep-alive>
      <component :is="view"></component>
    </keep-alive>
  </transition>

Обратите внимание, <keep-alive> предназначен для случая, когда есть один прямой дочерний компонент, который переключается. Он не будет работать, если в нём есть v-for. При наличии несколько дочерних компонентов отображаемых по условию, как указано выше, <keep-alive> требует, чтобы отображался только один дочерний компонент в один момент времени.

include и exclude

Добавлено в версии 2.1.0+

Входные параметры include и exclude позволяют организовать условное кэширование компонентов. Оба параметра можно указать в виде строки со списком имён компонентов через запятую, регулярным выражением или массивом:

<!-- строка с именами через запятую -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- регулярное выражение (используйте `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- массив (используйте `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

Проверяется сначала собственное значение настройки name компонента, а в случае его недоступности — имя, указанное при местной регистрации (ключ в настройке components компонента-родителя). Анонимные компоненты таким образом проверить не получится.

max

Добавлено в версии 2.5.0+

Максимальное количество экземпляров для кэширования. По достижению этого предела, экземпляр закэшированного компонента, который дольше всего не использовался будет уничтожен перед созданием нового экземпляра.
```
<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>
```

<keep-alive> не работает с функциональными компонентами, так как у них отсутствуют экземпляры.

См. также: Динамические и асинхронные компоненты — keep-alive с динамическими компонентами

slot

Входные параметры:
- name — string, используется для именования слотов
Использование:

<slot> — элемент, чьё содержимое будет распределено в шаблон компонента. Сам элемент <slot> при отрисовке заменяется.

Подробнее этот механизм описан в руководстве по ссылке ниже.
См. также: Распределение содержимого слотами

Интерфейс VNode

Смотрите информацию об объявлении классов VNode.

Отрисовка на стороне сервера

Смотрите документацию пакета vue-server-renderer.