Vue.js

Внешний вид

Содержание

Глоссарий ​

Этот глоссарий предназначен для того, чтобы дать некоторые указания относительно значений технических терминов, которые обычно используются при разговоре о Vue. Он предназначен для того, чтобы описать, как обычно используются термины, а не для того, чтобы предписать, как они должны использоваться. Некоторые термины могут иметь несколько иное значение или нюансы в зависимости от окружающего контекста.

Асинхронный компонент (async component) ​

Асинхронный компонент (async component) это обертка вокруг другого компонента, которая обеспечивает обёрнутому компоненту ленивую загрузку. Это типичный способ уменьшить размер сбилженных .js файлов через разбиение на небольшие чанки(chunks), которые будут подгружены только при необходимости.

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

Более подробную информацию смотрите в:

Макросы компилятора (compiler macro) ​

Макрос компилятора - это специальный код, который обрабатывается компилятором и преобразуется во что-то другое. По сути, они представляют собой умную форму замены строки.

Компилятор Vue SFC поддерживает различные макросы, такие как defineProps(), defineEmits() и defineExpose(). Эти макросы намеренно разработаны так, чтобы выглядеть как обычные функции JavaScript, чтобы они могли использовать тот же парсер и средства вывода типов, что и JavaScript / TypeScript. Однако они не являются реальными функциями, которые выполняются в браузере. Это специальные строки, которые компилятор обнаруживает и заменяет реальным JavaScript кодом, который будет выполняться на самом деле.

Макросы имеют ограничения на использование, которые не распространяются на обычный JavaScript код. Например, вы можете подумать, что const dp = defineProps позволит вам создать псевдоним для defineProps, но на самом деле это приведет к ошибке. Существуют также ограничения на то, какие значения можно передавать в defineProps(), поскольку "аргументы" должны обрабатываться компилятором, а не во время выполнения.

Более подробную информацию смотрите в:

Компонент (component) ​

Термин компонент (component) не является уникальным для Vue. Он характерен для многих UI фреймворков. Он описывает часть пользовательского интерфейса, например, кнопку или чекбокс. Компоненты также могут объединяться в более крупные компоненты.

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

Компонент Vue - это объект. Все свойства необязательны, но для рендеринга компонента нужен либо шаблон, либо функция рендеринга. Например, следующий объект будет правильным компонентом:

js
const HelloWorldComponent = {
  render() {
    return 'Привет, мир!'
  }
}

На практике большинство приложений Vue пишутся с использованием Однофайловых компонентов (SFC) (файлы .vue). Хотя на первый взгляд эти компоненты не могут быть объектами, компилятор SFC преобразует их в объект, который используется в качестве экспорта по умолчанию для файла. С внешней точки зрения файл .vue - это просто ES-модуль, экспортирующий объект-компонент.

Свойства объекта компонента обычно называются опциями. Отсюда и происходит название Options API.

Опции компонента определяют, как должны создаваться экземпляры этого компонента. Концептуально компоненты похожи на классы, хотя Vue не использует для их определения реальные классы JavaScript.

Термин "компонент" также может использоваться более свободно для обозначения экземпляров компонентов.

Более подробную информацию смотрите в:

Слово "компонент" также присутствует в следующих терминах:

Композабл (composable) ​

Термин композабл описывает общий паттерн во Vue. Это не отдельная возможность во Vue, это просто способ использования Composition API.

  • Композабл - это функция.
  • Композаблы используются для инкапсуляции и переиспользования логики с состоянием.
  • Имя функции обычно начинается с use, чтобы другие разработчики знали, что она является композаблом.
  • Обычно предполагается, что функция будет вызываться во время синхронного выполнения функции компонента setup() (или, эквивалентно, во время выполнения блока <script setup>). Это привязывает вызов композабла к текущему контексту компонента, например, через вызовы provide(), inject() или onMounted().
  • Композаблы обычно возвращают простой объект, а не реактивный. Этот объект обычно содержит ссылки и функции и, как ожидается, будет деструктуризирован в вызывающем коде.

Как и в случае со многими паттернами, могут возникнуть разногласия по поводу того, подходит ли конкретный код под это название (композабл). Не все служебные функции JavaScript являются композаблами. Если функция не использует Composition API, то она, вероятно, не является композаблом. Если не ожидается, что она будет вызвана во время синхронного выполнения setup(), то, вероятно, она не является композаблом. Композаблы специально используются для инкапсуляции логики с состоянием, это не просто соглашение об именовании функций.

Смотрите Руководство - Композаблы для более детальной информации о написании композаблов.

Composition API ​

Composition API - это набор функций, используемых для написания компонентов и композаблов во Vue.

Этот термин также используется для описания одного из двух основных стилей, используемых для написания компонентов, второй - Options API. Компоненты, написанные с использованием Composition API, используют либо <script setup>, либо явную функцию setup().

Больше деталей смотрите в Composition API FAQ.

Пользовательские элементы (custom element) ​

Пользовательский элемент - это возможность в стандарте Веб-компонентов, которая реализована в современных веб-браузерах. Это возможность использовать пользовательский HTML-элемент в вашей HTML-разметке для включения веб-компонента в это место страницы.

Vue имеет встроенную поддержку рендеринга пользовательских элементов и позволяет использовать их непосредственно в шаблонах компонентов Vue.

Пользовательские элементы не следует путать с возможностью включать Vue-компоненты в качестве тегов в шаблон другого компонента Vue. Пользовательские элементы используются для создания веб-компонентов, а не компонентов Vue.

Более подробную информацию смотрите в:

Директива (directive) ​

Термин директива относится к атрибутам шаблона, начинающимся с префикса v-, или их эквивалентным сокращениям.

Встроенные директивы включают в себя v-if, v-for, v-bind, v-on и v-slot.

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

Более подробную информацию смотрите в:

Динамический компонент (dynamic component) ​

Термин динамический компонент используется для описания случаев, когда выбор дочернего компонента для визуализации должен быть сделан динамически. Обычно для этого используется <component :is="type">.

Динамический компонент не является каким-то особым типом компонентов. Любой компонент может быть использован в качестве динамического компонента. Динамическим является выбор компонента, а не сам компонент.

Более подробную информацию смотрите в:

Эффект (effect) ​

Смотрите реактивный эффект и сайд эффект.

Событие (event) ​

Использование событий для связи между различными частями программы характерно для многих областей программирования. Во Vue этот термин обычно применяется как к событиям нативных HTML-элементов, так и к событиям Vue-компонентов. Директива v-on используется в шаблонах для прослушивания всех типов событий.

Более подробную информацию смотрите в:

Фрагмент (fragment) ​

Термин фрагмент относится к специальному типу VNode, который используется как родитель для других VNode, но сам не рендерит никаких элементов.

Название происходит от схожего понятия DocumentFragment в DOM API.

Фрагменты используются для поддержки компонентов с несколькими корневыми узлами. Хотя может показаться, что у таких компонентов несколько корней, за кулисами они используют узел фрагмента как один корень, как родитель узлов 'root'.

Фрагменты также используются компилятором шаблонов как способ обернуть несколько динамических узлов, например, созданных с помощью v-for или v-if. Это позволяет передавать дополнительные подсказки алгоритму изменений в VDOM. Большая часть из этого обрабатывается внутренними средствами, но одно место, где вы можете столкнуться с этим напрямую - это использование key в теге <template> с v-for. В этом случае key добавляется как входной параметр к VNode фрагмента.

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

Функциональный компонент (functional component) ​

Определение компонента обычно представляет собой объект, содержащий опции. Если вы используете <script setup>, это может выглядеть не так, но компонент, экспортированный из файла .vue, все равно будет объектом.

Функциональный компонент - это альтернативная форма компонента, которая объявляется с помощью функции. Эта функция действует как функция рендеринга для компонента.

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

Более подробную информацию смотрите в:

Подъем (hoisting) ​

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

JavaScript использует поднятие для некоторых конструкций, таких как var, import и объявления функций.

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

Более подробную информацию смотрите в:

Шаблон в DOM (in-DOM template) ​

Существуют различные способы определить шаблон для компонента. В большинстве случаев шаблон предоставляется в виде строки.

Термин шаблон в DOM относится к сценарию, в котором шаблон предоставляется в виде узлов DOM, а не в виде строки. Затем Vue преобразует узлы DOM в строку шаблона с помощью innerHTML.

Как правило, шаблон в DOM начинается как HTML-разметка, написанная непосредственно в HTML страницы. Затем браузер разбирает ее на узлы DOM, которые Vue использует для считывания innerHTML.

Более подробную информацию смотрите в:

Инъекция (inject) ​

Смотрите provide / inject.

Хуки жизненного цикла (lifecycle hooks) ​

Экземпляр компонента Vue проходит определенный жизненный цикл. Например, он создается, монтируется, обновляется и размонтируется.

Хуки жизненного цикла - это способ прослушивания этих событий жизненного цикла.

В Options API каждый хук предоставляется как отдельная опция, например mounted. В Composition API вместо этого используются функции, например onMounted().

Более подробную информацию смотрите в:

Макрос (macro) ​

Смотрите макрос компилятора.

Именованный слот (named slot) ​

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

Более подробную информацию смотрите в:

Options API ​

Компоненты Vue определяются с помощью объектов. Свойства этих объектов компонентов называют опциями.

Компоненты могут быть написаны в двух стилях. Один стиль использует Composition API в сочетании с setup (либо через опцию setup(), либо через <script setup>). Другой стиль практически не использует Composition API, вместо этого он использует различные опции компонента для достижения аналогичного результата. Опции компонента, которые используются таким образом, называются Options API.

Options API включает в себя такие опции, как data(), computed, methods и created().

Некоторые опции, такие как props, emits и inheritAttrs, могут быть использованы при создании компонентов с помощью любого API. Поскольку они являются опциями компонента, их можно считать частью Options API. Однако, поскольку эти опции также используются в сочетании с setup(), обычно полезнее считать их общими для двух стилей компонентов.

Сама функция setup() является опцией компонента, поэтому ее можно описать как часть Options API. Однако это не обычное использование термина "Options API". Вместо этого функция setup() рассматривается как часть Composition API.

Плагин (plugin) ​

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

Плагины добавляются в приложение с помощью вызова app.use(plugin). Сам плагин представляет собой либо функцию, либо объект с функцией install. Этой функции передается экземпляр приложения, и она может делать все, что ей нужно.

Более подробную информацию смотрите в:

Входной параметр (prop) ​

Во Vue есть три распространенных варианта использования термина входной параметр:

  • Входные параметры компонента
  • Входные параметры VNode
  • Входные параметры слотов

Входные параметры компонента - это то, о чем большинство людей думает видя "входной параметр". Они явно определяются компонентом с помощью defineProps() или опции props.

Термин входные параметры VNode относится к свойствам объекта, переданного в качестве второго аргумента в h(). Они могут включать входные параметры компонента, но также могут включать события компонентов, события DOM, атрибуты DOM и свойства DOM. Обычно входные параметры VNode встречаются только при работе с функциями рендеринга для непосредственного манипулирования VNode.

*Входные параметры слота - это свойства, передаваемые слоту с ограниченной областью видимости.

Во всех случаях входные параметры - это свойства, которые передаются извне.

Хотя слово props происходит от слова properties, термин props имеет гораздо более конкретное значение в контексте Vue. Вам не следует использовать его в качестве сокращения от слова properties.

Более подробную информацию смотрите в:

provide / inject ​

Предоставление(provide) и внедрение(inject) - это способ взаимодействия между компонентами.

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

provide и inject иногда используются, чтобы избежать prop drilling(объявление входного параметра вверху древа компонентов с пробросом значений до места использования). Они также могут использоваться как неявный способ связи компонента с содержимым его слота.

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

Более подробную информацию смотрите в:

Реактивный эффект (reactive effect) ​

Реактивный эффект - это часть системы реактивности Vue. Он относится к процессу отслеживания зависимостей функции и повторного запуска этой функции при изменении значений этих зависимостей.

watchEffect() - это самый прямой способ создания эффекта. Различные другие части Vue используют эффекты внутри себя. Например, функция обновления рендеринга, computed() и watch().

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

Этот термин происходит от "сайд эффекта". Вызов функции эффекта - это сайд эффект изменения значения свойства.

Более подробную информацию смотрите в:

Реактивность (reactivity) ​

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

В случае Vue реактивность используется для описания набора функций. Эти функции объединяются в систему реактивности, которая раскрывается через API реактивности.

Система реактивности может быть реализована различными способами. Например, это можно сделать с помощью статического анализа кода для определения его зависимостей. Однако Vue не использует такой тип системы реактивности.

Вместо этого система реактивности Vue отслеживает доступ к свойствам во время выполнения. Для этого используются как Proxy-обертки, так и функции getter/setter для свойств.

Более подробную информацию смотрите в:

API Реактивности (Reactivity API) ​

API реактивности - это набор основных функций Vue, связанных с реактивностью. Они могут использоваться независимо от компонентов. В него входят такие функции, как ref(), reactive(), computed(), watch() и watchEffect().

API реактивности является подмножеством Composition API.

Более подробную информацию смотрите в:

ref ​

Эта запись посвящена использованию ref для реактивности. Для атрибута ref, используемого в шаблонах, смотрите ссылки на элементы шаблона вместо этого.

ref является частью системы реактивности Vue. Это объект с одним реактивным свойством, называемым value.

Существуют различные типы ref-ов. Например, ref-ы могут быть созданы с помощью ref(), shallowRef(), computed() и customRef(). Функция isRef() может использоваться для проверки того, является ли объект ref-ом, а isReadonly() - для проверки того, допускает ли ref прямое переназначение своего значения.

Более подробную информацию смотрите в:

Рендер функция (render function) ​

Рендер функция - это часть компонента, которая генерирует VNodes, используемые во время рендеринга. Шаблоны компилируются в функции рендеринга.

Более подробную информацию смотрите в:

Планировщик (scheduler) ​

Планировщик - это часть внутреннего устройства Vue, которая контролирует когда реактивные эффекты будут выполнены.

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

Наблюдатели также собираются в очередь с помощью очереди планировщика. Наблюдатели с flush: 'pre' (по умолчанию) будут запущены до рендеринга компонента, а с flush: 'post' - после рендеринга компонента.

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

Слоты с ограниченной областью видимости (scoped slot) ​

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

Исторически сложилось так, что во Vue было гораздо больше различий между слотами с ограниченной областью видимости и без нее. В какой-то степени их можно было рассматривать как две отдельные функции, объединенные общим синтаксисом шаблонов.

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

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

Более подробную информацию смотрите в:

SFC ​

Смотрите Однофайловые компоненты.

Сайд эффект (side effect) ​

Термин сайд эффект не специфичен только для Vue. Он используется для описания операций или функций, которые делают что-то за пределами своей локальной области.

Например, в случае установки свойства user.name = null ожидается, что оно изменит значение user.name. Если при этом выполняется что-то еще, например, запускается система реактивности Vue, то это можно назвать сайд эффектом. Отсюда и происходит термин реактивный эффект во Vue.

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

Этот термин часто используется при описании рендеринга или вычисляемых свойств. Считается, что рендеринг не имеет сайд эффектов. Аналогично, функция getter для вычисляемого свойства не должна иметь сайд эффектов.

Однофайловый компонент ​

Термин Однофайловый компонент - SFC, относится к формату файлов .vue, который обычно используется для компонентов Vue.

Более подробную информацию смотрите в:

Слот (slot) ​

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

Более подробную информацию смотрите в:

Ссылки на элементы шаблона (template ref) ​

Термин ссылка на элемент шаблона означает использование атрибута ref для тега в шаблоне. После рендеринга компонента этот атрибут используется для заполнения соответствующего свойства либо HTML-элементом, либо экземпляром компонента, который соответствует тегу в шаблоне.

Если вы используете Options API, то ссылки на элементы шаблона отображаются через свойства объекта $refs.

При использовании Composition API ссылки на элементы шаблона заполняют ref с тем же именем.

Ссылки на элементы шаблона не следует путать с ref из системы реактивности Vue.

Более подробную информацию смотрите в:

VDOM ​

Смотрите виртуальный DOM.

Виртуальный DOM (virtual DOM) ​

Термин виртуальный DOM (VDOM) не является уникальным для Vue. Это общий подход, используемый несколькими веб-фреймворками для управления обновлениями пользовательского интерфейса.

Браузеры используют дерево узлов для представления текущего состояния страницы. Это дерево и API JavaScript, используемые для взаимодействия с ним, называются объектной моделью документа(document object model) или DOM.

Манипулирование DOM является одним из основных узких мест в производительности. Виртуальный DOM предоставляет одну из стратегий для управления им.

Вместо того чтобы создавать узлы DOM напрямую, компоненты Vue генерируют описание того, какие узлы DOM они хотели бы получить. Эти дескрипторы представляют собой обычные объекты JavaScript, известные как VNodes (виртуальные узлы DOM). Создание VNodes обходится относительно дешево.

Каждый раз, когда компонент повторно рендерится, новое дерево VNodes сравнивается с предыдущим деревом VNodes, и все различия затем применяются к реальному DOM. Если ничего не изменилось, то трогать DOM не нужно.

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

Более подробную информацию смотрите в:

VNode ​

VNode - это виртуальный узел DOM. Они могут быть созданы с помощью функции h().

Более подробную информацию смотрите в:

Веб-компонент (Web Component) ​

Стандарт веб-компонентов - это набор возможностей, реализованных в современных веб-браузерах.

Компоненты Vue не являются веб-компонентами, но defineCustomElement() можно использовать для создания пользовательских элементов из компонента Vue. Vue также поддерживает использование пользовательских элементов внутри компонентов Vue.

Более подробную информацию смотрите в:

Исправить эту страницу на GitHub