Vue.js

# Глобальное API

При использовании сборки с CDN доступ к функциям глобального API можно получить через глобальный объект Vue, например:

const { createApp, h, nextTick } = Vue
1

При использовании ES-модулей, их можно импортировать напрямую:

import { createApp, h, nextTick } from 'vue'
1

Глобальные функции для работы с реактивностью, такие как reactive и ref, задокументированы отдельно. Подробнее о них можно изучить в разделе Reactivity API.

# createApp

Возвращает экземпляр приложения, который предоставляет контекст приложения. Всё дерево компонентов, смонтированных экземпляром приложения, имеет один и тот же контекст.

const app = createApp({})
1

После createApp можно цепочкой вызывать другие методы, их перечень можно найти в API приложения

# Аргументы

Первым аргументом функция получает объект настроек корневого компонента:

const app = createApp({
  data() {
    return {
      ...
    }
  },
  methods: {...},
  computed: {...}
  ...
})
1
2
3
4
5
6
7
8
9
10

Вторым аргументом можно передать корневые входные параметры приложения:

const app = createApp(
  {
    props: ['username']
  },
  { username: 'Evan' }
)
1
2
3
4
5
6
<div id="app">
  <!-- Отобразит 'Evan' -->
  {{ username }}
</div>
1
2
3
4

# Типы

interface Data {
  [key: string]: unknown
}

export type CreateAppFunction<HostElement> = (
  rootComponent: PublicAPIComponent,
  rootProps?: Data | null
) => App<HostElement>
1
2
3
4
5
6
7
8

# h

Возвращает «виртуальную ноду», для сокращения называемую как VNode: простой объект, содержащий информацию для Vue какой узел должен отобразиться на странице, включая описания любых дочерних узлов. Предназначается для написания render-функций вручную:

render() {
  return h('h1', {}, 'Какой-то заголовок')
}
1
2
3

# Аргументы

Принимает три аргумента: type, props и children

# type

  • Тип: String | Object | Function

  • Подробности:

    Имя HTML-тега, компонента или асинхронного компонента. Использование функции, возвращающей null будет отрисовывать комментарий. Этот параметр обязателен.

# props

  • Тип: Object

  • Подробности:

    Объект, с соответствующими атрибутами, входными параметрами и событиями, которые будут использоваться в шаблоне. Опционально.

# children

  • Тип: String | Array | Object

  • Подробности:

    Дочерние VNode, созданные с помощью h(), или использование строк для получения «текстовых VNode», или объект со слотами. Опционально.

    h('div', {}, [
  'Some text comes first.',
  h('h1', 'A headline'),
  h(MyComponent, {
    someProp: 'foobar'
  })
])
    1
    2
    3
    4
    5
    6
    7

# defineComponent

Реализация defineComponent ничего не делает, но возвращает переданный ему объект. Однако, с точки зрения типизации, возвращаемое значение имеет синтетический тип конструктора для создаваемых render-функций, TSX и поддержки инструментария IDE.

# Аргументы

Объект с опциями компонента

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  data() {
    return { count: 1 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

Или функция setup, имя которой будет использовано в качестве имени компонента

import { defineComponent, ref } from 'vue'

const HelloWorld = defineComponent(function HelloWorld() {
  const count = ref(0)
  return { count }
})
1
2
3
4
5
6

# defineAsyncComponent

Создаёт асинхронный компонент, который будет загружен только при необходимости.

# Аргументы

Обычно, в defineAsyncComponent передают функцию-фабрику, возвращающую Promise. Его коллбэк resolve должен вызываться при получении описания компонента с сервера. Также можно вызываться reject(reason) для обозначения неудачи при загрузке.

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

app.component('async-component', AsyncComp)
1
2
3
4
5
6
7

При использовании локальной регистрации компонента также можно напрямую указывать функцию, которая возвращает Promise:

import { createApp, defineAsyncComponent } from 'vue'

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
})
1
2
3
4
5
6
7
8
9
10

Для продвинутого использования defineAsyncComponent может принимать объект следующего формата:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent({
  // Функция-фабрика
  loader: () => import('./Foo.vue')
  // Компонент загрузки, используемый во время загрузки асинхронного компонента
  loadingComponent: LoadingComponent,
  // Компонент ошибки, используемый в случае неудачи при загрузке
  errorComponent: ErrorComponent,
  // Ожидание перед показом компонента загрузки. По умолчанию: 200ms.
  delay: 200,
  // Компонент ошибки будет отображаться, если был указан таймаут
  // и время ожидания превышено. По умолчанию: Infinity.
  timeout: 3000,
  // Определение является ли компонент suspensible. По умолчанию: true.
  suspensible: false,
  /**
   * Обработчик ошибки
   * @param {*} error Объект ошибки с сообщением
   * @param {*} retry Функция, определяющая повторные попытки загрузки, при promise rejects
   * @param {*} fail  Конец обработки ошибок
   * @param {*} attempts Максимальное число повторных попыток
   */
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // повтор при ошибках загрузки, максимум 3 попытки
      retry()
    } else {
      // обратите внимание, retry/fail аналогичны resolve/reject для promise:
      // один из них должен быть вызван для продолжения обработки ошибок.
      fail()
    }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

См. также: Динамические и асинхронные компоненты

# resolveComponent

ВНИМАНИЕ

resolveComponent можно использовать только внутри функций render или setup.

Позволяет разрешить component по его имени, если он доступен в текущем экземпляре приложения.

Возвращает Component или аргумент name если не был найден.

const app = createApp({})
app.component('MyComponent', {
  /* ... */
})
1
2
3
4
import { resolveComponent } from 'vue'
render() {
  const MyComponent = resolveComponent('MyComponent')
}
1
2
3
4

# Аргументы

Принимает один аргумент: name

# name

  • Тип: String

  • Подробности:

    Имя загружаемого компонента.

# resolveDynamicComponent

ВНИМАНИЕ

resolveDynamicComponent можно использовать только внутри функций render или setup.

Позволяет разрешить component по аналогичному механизму как в <component :is="">.

Возвращает Component или новую созданную VNode с именем компонента в качестве тега. Будет отображать предупреждение, если Component не был найден.

import { resolveDynamicComponent } from 'vue'
render () {
  const MyComponent = resolveDynamicComponent('MyComponent')
}
1
2
3
4

# Аргументы

Принимает один аргумент: component

# component

# resolveDirective

ВНИМАНИЕ

resolveDirective можно использовать только внутри функций render или setup.

Позволяет разрешить directive по её имени, если она доступна в текущем экземпляре приложения.

Возвращает Directive или undefined если не была найдена.

const app = createApp({})
app.directive('highlight', {})
1
2
import { resolveDirective } from 'vue'
render () {
  const highlightDirective = resolveDirective('highlight')
}
1
2
3
4

# Аргументы

Принимает один аргумент: name

# name

  • Тип: String

  • Подробности:

    Имя загружаемой директивы.

# withDirectives

ВНИМАНИЕ

withDirectives можно использовать только внутри функций render или setup.

Позволяет применять директивы к VNode. Возвращает VNode с применёнными директивами.

import { withDirectives, resolveDirective } from 'vue'
const foo = resolveDirective('foo')
const bar = resolveDirective('bar')

return withDirectives(h('div'), [
  [foo, this.x],
  [bar, this.y]
])
1
2
3
4
5
6
7
8

# Аргументы

Принимает два аргумента: vnode и directives.

# vnode

  • Тип: vnode

  • Подробности:

    Виртуальная нода, обычно созданная с помощью h().

# directives

  • Тип: Array

  • Подробности:

    Массив директив.

    Каждая директива сама по себе является массивом, что позволяет определять до 4 индексов, как показано в следующих примерах.

    • [directive] — Директива сама по себе. Обязательно.
    const MyDirective = resolveDirective('MyDirective')
const nodeWithDirectives = withDirectives(h('div'), [[MyDirective]])
    1
    2
    • [directive, value] — Тоже, что и выше, плюс значение типа any, которое присваивается директиве.
    const MyDirective = resolveDirective('MyDirective')
const nodeWithDirectives = withDirectives(h('div'), [[MyDirective, 100]])
    1
    2
    • [directive, value, arg] — Тоже, что и выше, плюс аргумент типа String, т.е. click в v-on:click.
    const MyDirective = resolveDirective('MyDirective')
const nodeWithDirectives = withDirectives(h('div'), [
  [MyDirective, 100, 'click']
])
    1
    2
    3
    4
    • [directive, value, arg, modifiers] — Тоже, что и выше, плюс пары key: value типа Object, определяющие любые модификаторы.
    const MyDirective = resolveDirective('MyDirective')
const nodeWithDirectives = withDirectives(h('div'), [
  [MyDirective, 100, 'click', { prevent: true }]
])
    1
    2
    3
    4

# createRenderer

Функция createRenderer принимает 2 общих аргумента: HostNode и HostElement, соответствующие типам Node и Element в окружении.

Например, для runtime-DOM, HostNode будет интерфейсом DOM Node, а HostElement будет интерфейсом DOM Element.

Пользовательские рендеры могут передавать платформо-специфичные типы следующим образом:

import { createRenderer } from 'vue'
const { render, createApp } = createRenderer<Node, Element>({
  patchProp,
  ...nodeOps
})
1
2
3
4
5

# Аргументы

Принимает два аргумента: HostNode и HostElement

# HostNode

  • Тип: Node

  • Подробности:

    Узел в окружении.

# HostElement

  • Тип: Element

  • Подробности:

    Элемент в окружении.

# nextTick

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

import { createApp, nextTick } from 'vue'

const app = createApp({
  setup() {
    const message = ref('Привет!')
    const changeMessage = async newMessage => {
      message.value = newMessage
      await nextTick()
      console.log('Теперь DOM обновлён')
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

См. также: метод экземпляра $nextTick

# mergeProps

Объединяет в один несколько объектов входных параметров VNode. Возвращается новый объект — все передаваемые аргументами объекты останутся без изменений.

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

import { h, mergeProps } from 'vue'

export default {
  inheritAttrs: false,

  render() {
    const props = mergeProps({
      // Класс будет объединён с любым другим классом из $attrs
      class: 'active'
    }, this.$attrs)

    return h('div', props)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# useCssModule

Предупреждение

useCssModule можно использовать только внутри функций render или setup.

Позволяет получить доступ к CSS-модулям в функции setup однофайлового компонента:

<script>
import { h, useCssModule } from 'vue'

export default {
  setup () {
    const style = useCssModule()

    return () => h('div', {
      class: style.success
    }, 'Задача выполнена!')
  }
}
</script>

<style module>
.success {
  color: #090;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Дополнительную информацию об использовании CSS-модулей можно изучить в разделе Vue Loader — CSS модули (opens new window).

# Аргументы

Принимает один аргумент: name

# name

  • Тип: String

  • Подробности:

    Имя CSS-модуля. По умолчанию '$style'.

Deployed on Netlify.
Последнее обновление: 2021-03-01, 18:52:35 UTC

← Локальное состояние (data) →