Vue Academy · Урок

Шаблон компонентов высшего порядка (HOC)

Обёртка компонентов с помощью HOC, передача свойств и слотов и выбор между HOC и композируемым модулем

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

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

Что такое компонент высшего порядка

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

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

По соглашению имя HOC начинается с префикса with. Он получает оборачиваемый компонент и возвращает расширенный компонент.

function withLogging(Wrapped) {
  // return a new component
}

Возврат defineComponent

Новый компонент создается с помощью defineComponent. Его функция setup отрисовывает оборачиваемый компонент через h.

import { defineComponent, h } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, ctx) {
      return () => h(Wrapped, props, ctx.slots);
    }
  });
}

Передача атрибутов дальше

Чтобы оболочка оставалась прозрачной, разверните ctx.attrs на оборачиваемом компоненте. Так передаются класс, стиль и любые нераспознанные свойства.

setup(props, { attrs, slots }) {
  return () => h(Wrapped, { ...attrs }, slots);
}

Передача слотов дальше

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

return () => h(Wrapped, attrs, slots);

Добавление сквозного поведения

Именно для добавления поведения и используется HOC. Здесь мы вызываем log при монтировании и размонтировании оборачиваемого компонента.

import { onMounted, onUnmounted } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      onMounted(() => console.log("mounted"));
      onUnmounted(() => console.log("unmounted"));
      return () => h(Wrapped, attrs, slots);
    }
  });
}

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

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

import BaseTable from "./BaseTable.vue";

const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any component

Именование оболочки

Задайте name, чтобы оболочку можно было определить в Vue DevTools. Составное имя, включающее имя оборачиваемого компонента, сохраняет дерево понятным.

return defineComponent({
  name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
  setup(props, ctx) { /* ... */ }
});

Внедрение дополнительных свойств

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

function withUser(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      const user = inject("currentUser");
      return () => h(Wrapped, { ...attrs, user }, slots);
    }
  });
}

HOC и композиционные функции

Композиционные функции делятся логикой и часто предпочтительнее во Vue 3. HOC лучше использовать, когда необходимо обернуть отрисовку существующего компонента, который нельзя изменить, или стандартизировать границу, например для обработки ошибок.

Композиция нескольких HOC

Поскольку каждый HOC возвращает компонент, их можно объединять вложением. Применяйте их в порядке: внешний — последним.

const Enhanced = withLogging(withUser(BaseTable));

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

Что должен передавать оборачиваемому компоненту прозрачный HOC?

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

Итоги

HOC, такой как withLogging(Wrapped), возвращает новый defineComponent, функция setup которого отрисовывает оборачиваемый компонент с помощью h(Wrapped, attrs, slots), добавляя сквозное поведение, например ведение журнала или внедрение свойств. Для прозрачности передавайте атрибуты и слоты, а композиционные функции предпочитайте, когда нужно только разделить логику.

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

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

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

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

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

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

Урок «Шаблон компонентов высшего порядка (HOC)» бесплатный?

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

Чему я научусь в уроке «Шаблон компонентов высшего порядка (HOC)»?

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

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

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

Сколько времени занимает урок «Шаблон компонентов высшего порядка (HOC)»?

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

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

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

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

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

← Назад к Vue Academy