Vue.js

Оформление

Оглавление

Глоссарий ​

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

асинхронный компонент ​

Асинхронный компонент — это обёртка вокруг другого компонента, позволяющая лениво загружать обёрнутый компонент. Обычно используется для уменьшения размера собранных файлов .js, позволяя разбить их на более мелкие фрагменты, которые загружаются только при необходимости.

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

Узнать больше:

макрос компилятора ​

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

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

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

Узнать больше:

компонент ​

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

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

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

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

На практике большинство приложений Vue пишутся с использованием однофайловых компонентов (файлы с расширением .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.

пользовательский элемент ​

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

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

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

Узнать больше:

директива ​

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

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

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

Узнать больше:

динамический компонент ​

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

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

Узнать больше:

эффект ​

См. реактивный эффект и побочный эффект.

событие ​

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

Узнать больше:

фрагмент ​

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

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

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

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

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

функциональный компонент ​

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

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

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

Узнать больше:

поднятие ​

Термин поднятие (hoisting) используется для описания поведения, при котором функцию или переменную можно использовать до объявления.

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

В контексте Vue компилятор применяет поднятие для повышения производительности. При компиляции компонента статические значения выносятся за пределы области видимости компонента. Эти статические значения называются «поднятыми», потому что они создаются вне компонента.

кэширование статики ​

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

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

Узнать больше:

шаблон в DOM ​

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

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

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

Узнать больше:

inject ​

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

хуки жизненного цикла ​

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

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

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

Узнать больше:

макрос ​

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

именованный слот ​

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

Узнать больше:

Options API ​

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

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

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

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

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

плагин ​

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

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

Узнать больше:

проп ​

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

  • Параметры компонентов
  • Параметры VNode
  • Параметры слотов

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

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

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

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

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

Узнать больше:

provide / inject ​

provide и inject — это форма межкомпонентного взаимодействия.

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

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

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

Узнать больше:

реактивный эффект ​

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

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

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

Этот термин происходит от «побочного эффекта». Вызов функции эффекта — это побочный эффект изменения значения свойства.

Узнать больше:

реактивность ​

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

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

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

Вместо этого система реактивности Vue отслеживает доступ к свойствам во время выполнения. Он делает это, используя как обёртки Proxy, так и геттеры/сеттеры для свойств.

Узнать больше:

Reactivity API ​

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

Reactivity API это подмножество Composition API.

Узнать больше:

ref ​

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

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

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

Узнать больше:

рендер-функция ​

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

Узнать больше:

планировщик ​

Планировщик (scheduler) — это часть внутреннего устройства Vue, которая контролирует время выполнения реактивных эффектов.

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

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

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

слот с ограниченной областью видимости ​

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

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

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

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

Узнать больше:

SFC ​

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

побочный эффект ​

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

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

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

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

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

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

Смотрите также:

слот ​

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

Узнать больше:

ссылка на элемент шаблона ​

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

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

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

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

Узнать больше:

VDOM ​

Смотрите Virtual DOM.

Virtual DOM ​

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

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

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

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

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

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

Узнать больше:

VNode ​

Узел VNode — это виртуальный узел DOM. Их можно создать с помощью функции h().

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

веб-компонент ​

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

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

Узнать больше:

Редактировать эту страницу на GitHub