Vue.js

Зовнішній вигляд

На цій сторінці

API функції рендерингу ​

h() ​

Створює віртуальні вузли DOM (vnodes).

  • Тип

    ts
    // повна сигнатура
function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
): VNode

// без реквізитів
function h(type: string | Component, children?: Children | Slot): VNode

type Children = string | number | boolean | VNode | null | Children[]

type Slot = () => Children

type Slots = { [name: string]: Slot }

    Типи спрощено для зручності читання.

  • Подробиці

    Перший аргумент може бути або рядком (для рідних елементів), або визначенням компонента Vue. Другим аргументом є атрибути, які потрібно передати, а третім аргументом є дочірні елементи.

    Під час створення vnode компонента дочірні елементи повинні бути передані як функції слотів. Можна передати єдину функцію слота, якщо компонент очікує лише слот за замовчуванням. В іншому випадку слоти повинні бути передані як об'єкт функцій слота.

    Для зручності аргумент реквізитів можна опустити, якщо дочірні елементи не є об'єктами слотів.

  • Приклад

    Створення рідних елементів:

    js
    import { h } from 'vue'

// усі аргументи, крім типу, необов'язкові
h('div')
h('div', { id: 'foo' })

// як атрибути, так і властивості можна використовувати
// в реквізитах
// Vue автоматично вибирає правильний спосіб їх призначення
h('div', { class: 'bar', innerHTML: 'hello' })

// class і style мають ту саму підтримку значень
// object / array, як і в шаблонах
h('div', { class: [foo, { bar }], style: { color: 'red' } })

// слухачі подій мають бути передані як onXxx
h('div', { onClick: () => {} })

// дочірні елементи можуть бути строковими
h('div', { id: 'foo' }, 'hello')

// реквізити можуть бути не вказані, якщо їх немає
h('div', 'hello')
h('div', [h('span', 'hello')])

// масив дочірніх елементів може містити змішані vnodes і strings
h('div', ['hello', h('span', 'hello')])

    Створення компонентів:

    js
    import Foo from './Foo.vue'

// передавання реквізитів
h(Foo, {
  // еквівалент some-prop="hello"
  someProp: 'hello',
  // еквівалент @update="() => {}"
  onUpdate: () => {}
})

// передавання єдиного слоту за замовчуванням
h(Foo, () => 'default slot')

// передавання іменованих слотів
// зауважте, що `null` потрібен, щоб об'єкт
// слотів не розглядався як атрибути
h(MyComponent, null, {
  default: () => 'default slot',
  foo: () => h('div', 'foo'),
  bar: () => [h('span', 'one'), h('span', 'two')]
})

  • Дивіться також: Посібник – Функції рендерингу – Створення віртуальних вузлів

mergeProps() ​

Об'єднує кілька об'єктів реквізитів із спеціальною обробкою для певних реквізитів.

  • Тип

    ts
    function mergeProps(...args: object[]): object

  • Подробиці

    mergeProps() підтримує об'єднання кількох об'єктів реквізитів із спеціальною обробкою для наступних реквізитів:

    • class
    • style
    • onXxx слухачі подій - кілька слухачів з однаковою назвою будуть об'єднані в масив.

    Якщо вам не потрібне злиття і ви бажаєте здійснити простий перезапис, замість цього можна використовувати власне поширення об'єктів.

  • Приклад

    js
    import { mergeProps } from 'vue'

const one = {
  class: 'foo',
  onClick: handlerA
}

const two = {
  class: { bar: true },
  onClick: handlerB
}

const merged = mergeProps(one, two)
/**
 {
   class: 'foo bar',
   onClick: [handlerA, handlerB]
 }
 */

cloneVNode() ​

Клонує vnode.

  • Тип

    ts
    function cloneVNode(vnode: VNode, extraProps?: object): VNode

  • Подробиці

    Повертає клонований vnode з необов'язковими додатковими атрибутами для об'єднання з оригіналом.

    Vnode слід вважати незмінними після створення, і ви не повинні змінювати властивості існуючого vnode. Натомість клонуйте його за допомогою інших / додаткових реквізитів.

    Vnodes мають особливі внутрішні властивості, тому їх клонування не таке просте, як поширення об'єктів. cloneVNode() обробляє більшість внутрішньої логіки.

  • Приклад

    js
    import { h, cloneVNode } from 'vue'

const original = h('div')
const cloned = cloneVNode(original, { id: 'foo' })

isVNode() ​

Перевіряє чи значення є vnode.

  • Тип

    ts
    function isVNode(value: unknown): boolean

resolveComponent() ​

Для ручної резолюції зареєстрованого компонента за назвою.

  • Тип

    ts
    function resolveComponent(name: string): Component | string

  • Подробиці

    Примітка: вам це не потрібно, якщо ви можете імпортувати компонент безпосередньо.

    resolveComponent() має бути викликано вsetup() чи функції рендерингу для резолюції з правильного контексту компонента.

    Якщо компонент не знайдено, буде видано попередження під час виконання та повернено рядок з ім'ям.

  • Приклад

    js
    const { h, resolveComponent } = Vue

export default {
  setup() {
    const ButtonCounter = resolveComponent('ButtonCounter')

    return () => {
      return h(ButtonCounter)
    }
  }
}
    js
    const { h, resolveComponent } = Vue

export default {
  render() {
    const ButtonCounter = resolveComponent('ButtonCounter')
    return h(ButtonCounter)
  }
}

  • Дивіться також: Посібник – Функції рендерингу – Компоненти

resolveDirective() ​

Для ручної резолюції зареєстрованої директиви за назвою.

  • Тип

    ts
    function resolveDirective(name: string): Directive | undefined

  • Подробиці

    Примітка: вам це не потрібно, якщо ви можете імпортувати компонент безпосередньо.

    resolveDirective() має бути викликано вsetup() чи функції рендерингу для резолюції з правильного контексту компонента.

    Якщо директиву не знайдено, буде видане попередження під час виконання, і функція поверне undefined.

  • Дивіться також: Посібник - Функції рендерингу - Користувацькі директиви

withDirectives() ​

Для додавання користувацьких директив до vnodes.

  • Тип

    ts
    function withDirectives(
  vnode: VNode,
  directives: DirectiveArguments
): VNode

// [Directive, value, argument, modifiers]
type DirectiveArguments = Array<
  | [Directive]
  | [Directive, any]
  | [Directive, any, string]
  | [Directive, any, string, DirectiveModifiers]
>

  • Подробиці

    Огортає існуючий vnode користувацькими директивами. Другим аргументом є масив користувацьких директив. Кожна користувацька директива також представлена як масив у формі [Directive, value, argument, modifiers]. Кінцеві елементи масиву можна опустити, якщо вони не потрібні.

  • Приклад

    js
    import { h, withDirectives } from 'vue'

// користувацька директива
const pin = {
  mounted() {
    /* ... */
  },
  updated() {
    /* ... */
  }
}

// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [
  [pin, 200, 'top', { animate: true }]
])

  • Дивіться також: Посібник - Функції рендерингу - Спеціальні директиви

withModifiers() ​

Для додавання вбудованих v-on модифікаторів до функції обробника подій.

Редагувати цю сторінку на GitHub