Skip to content

Глобальное API: Основное

version

Возвращает текущую версию Vue.

  • Тип string

  • Пример

    js
    import { version } from 'vue'
    
    console.log(version)

nextTick()

Утилита для ожидания следующего обновления DOM.

  • Тип

    ts
    function nextTick(callback?: () => void): Promise<void>
  • Подробности

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

    nextTick() можно использовать сразу после изменения состояния, чтобы дождаться завершения обновления DOM. В качестве аргумента можно передать коллбэк или дождаться разрешения возвращаемого Promise.

  • Пример

    vue
    <script setup>
    import { ref, nextTick } from 'vue'
    
    const count = ref(0)
    
    async function increment() {
      count.value++
    
      // DOM еще не обновлён
      console.log(document.getElementById('counter').textContent) // 0
    
      await nextTick()
      // DOM обновился
      console.log(document.getElementById('counter').textContent) // 1
    }
    </script>
    
    <template>
      <button id="counter" @click="increment">{{ count }}</button>
    </template>
    vue
    <script>
    import { nextTick } from 'vue'
    
    export default {
      data() {
        return {
          count: 0
        }
      },
      methods: {
        async increment() {
          this.count++
    
          // DOM еще не обновлён
          console.log(document.getElementById('counter').textContent) // 0
    
          await nextTick()
          // DOM обновился
          console.log(document.getElementById('counter').textContent) // 1
        }
      }
    }
    </script>
    
    <template>
      <button id="counter" @click="increment">{{ count }}</button>
    </template>
  • См. также this.$nextTick()

defineComponent()

Утилита для типизации определения компонента Vue

  • Тип

    ts
    // синтаксис Options API
    function defineComponent(
      component: ComponentOptions
    ): ComponentConstructor
    
    // синтаксис функции (требуется 3.3+)
    function defineComponent(
      setup: ComponentOptions['setup'],
      extraOptions?: ComponentOptions
    ): () => any

    Тип упрощен для удобства чтения

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

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

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

    Тип экземпляра компонента (эквивалентный типу this в его опциях) можно извлечь из возвращаемого типа defineComponent() следующим образом:

    ts
    const Foo = defineComponent(/* ... */)
    
    type FooInstance = InstanceType<typeof Foo>

    Сигнатура Функции

    • Поддерживается только в 3.3+

    defineComponent() также имеет альтернативный синтаксис, для совместного использования Composition API и рендер-функций или JSX.

    Вместо объекта с опциями первым аргументом defineComponent() может принимать функцию. Эта функция выполняется точно так же, как и setup() из Composition API, принимая props и context в качестве аргументов. Ожидается, что эта функция вернёт JSX или рендер-функцию с h() - оба варианта поддерживаются:

    js
    import { ref, h } from 'vue'
    
    const Comp = defineComponent(
      (props) => {
        // код как в <script setup> Composition API
        const count = ref(0)
    
        return () => {
          // рендер-функция или JSX
          return h('div', count.value)
        }
      },
      // дополнительные параметры, например, описание входных данных и emits
      {
        props: {
          /* ... */
        }
      }
    )

    Такой синтаксис удобен для написания компонентов с иcпользованием TypeScript (в частности с TSX), так как в нём можно использовать generic-типы:

    tsx
    const Comp = defineComponent(
      <T extends string | number>(props: { msg: T; list: T[] }) => {
        // код как в <script setup> Composition API
        const count = ref(0)
    
        return () => {
          // рендер-функция или JSX
          return <div>{count.value}</div>
        }
      },
      // Описание входных данных в runtime всё ещё необходимо
      {
        props: ['msg', 'list']
      }
    )

    В будущем мы планируем добавить Babel-плагин, который автоматически внедрит описанные входные данные (как это делает defineProps in SFC-компонентах). Таким образом, описание входных данных можно будет опустить.

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

    Поскольку defineComponent() является вызовом функции, это может выглядеть так, что вызовет побочные эффекты (на англ. side-effects) для некоторых инструментов сборки, например, webpack. Это позволит предотвратить встряхивание дерева (на англ. tree-shaking) компонента, даже если он никогда не используется.

    Чтобы сообщить webpack о том, что данный вызов функции безопасен для встряхивания дерева (на англ. tree-shaking), можно добавить специальный комментарий /_#**PURE**_/ перед вызовом функции:

    js
    export default /*#__PURE__*/ defineComponent(/* ... */)

    Обратите внимание, что это не требуется при использовании Vite, поскольку Rollup (базовый пакетный модуль, используемый Vite) достаточно умён, чтобы определить, что defineComponent() действительно не имеет побочных эффектов без необходимости ручной аннотации.

  • См. также Руководство — Использование Vue с TypeScript

defineAsyncComponent()

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

  • Тип

    ts
    function defineAsyncComponent(
      source: AsyncComponentLoader | AsyncComponentOptions
    ): Component
    
    type AsyncComponentLoader = () => Promise<Component>
    
    interface AsyncComponentOptions {
      loader: AsyncComponentLoader
      loadingComponent?: Component
      errorComponent?: Component
      delay?: number
      timeout?: number
      suspensible?: boolean
      onError?: (
        error: Error,
        retry: () => void,
        fail: () => void,
        attempts: number
      ) => any
    }
  • См. также Руководство — Асинхронные компоненты

Глобальное API: ОсновноеУже загружено