Vue Academy · Урок

Подробный разбор функции h()

Сигнатура h(type, props, children), структура VNode и рендеринг динамических типов компонентов

Урок 1 из 413 шагов

«Подробный разбор функции h()» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Что такое функция h

Функция h (сокращение от hyperscript) напрямую создаёт узлы виртуального DOM (VNodes) в JavaScript. Она лежит в основе шаблонов, в которые компилируется такой код. Функция рендеринга возвращает результат вызова h.

Сигнатура

h принимает три аргумента: h(type, props, children). Тип может быть строкой с именем тега, объектом компонента или функциональным компонентом. Параметры — это объект атрибутов, свойств и обработчиков событий. Дочерние элементы — это текст, массив виртуальных узлов или объект слотов.

import { h } from "vue";

h(type, props, children);

Простой элемент

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

import { h } from "vue";

h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>

Параметры и атрибуты

Всё помещается в один объект параметров: атрибуты HTML, свойства DOM, class, style и обработчики событий. Vue определяет назначение каждого элемента во время обновления.

h("input", {
  type: "text",
  value: "hello",
  class: "field",
  placeholder: "Type here"
});

Массивы дочерних элементов

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

h("ul", null, [
  h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>

Передача null при отсутствии свойств

Если у элемента нет свойств, можно передать null (или пустой объект) вторым аргументом, чтобы дочерние элементы остались на третьем месте.

h("ul", null, [
  h("li", null, "first"),
  h("li", null, "second")
]);

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

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

import { h } from "vue";
import MyComponent from "./MyComponent.vue";

h(MyComponent, { title: "Hello" });

Передача слотов в виде объекта

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

h(MyComponent, { title: "Hello" }, {
  default: () => "slot content"
});

Именованные слоты и слоты с областью видимости

Несколько слотов — это просто несколько ключей. Слоты с областью видимости получают свои свойства в качестве аргумента функции.

h(MyComponent, null, {
  header: () => h("h1", null, "Title"),
  default: (props) => h("p", null, props.text)
});

Обработчики событий

События представлены свойствами с префиксом on, за которым следует имя события в PascalCase. Обработчик щелчка — это свойство onClick.

h("button", {
  onClick: () => console.log("clicked")
}, "Press me");

Возврат h из функции рендеринга

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

import { h, ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    return () => h("button", {
      onClick: () => count.value++
    }, "Count: " + count.value);
  }
};

Быстрая проверка

Как передать компоненту содержимое слота по умолчанию с помощью h?

Ответь в интерактивном уроке

Итоги

Функция h создает виртуальные узлы с помощью h(type, props, children). Типом может быть тег или компонент, в свойствах находятся атрибуты и обработчики onEvent, а дочерними элементами могут быть текст, массив виртуальных узлов или объект слотов с функциями. Функции рендеринга возвращают вызовы h и выполняются при каждом повторном рендеринге.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Подробный разбор функции h()» бесплатный?

Да — полный текст урока «Подробный разбор функции h()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Подробный разбор функции h()»?

Сигнатура h(type, props, children), структура VNode и рендеринг динамических типов компонентов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Подробный разбор функции h()»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Подробный разбор функции h()
JSX во Vue 3 с Vite
Динамические компоненты с функциями render
Шаблон компонентов высшего порядка (HOC)

← Назад к Vue Academy