Классический способ описания компонента во Vue 2 получил название Options API. Поддерживать
обратная совместимость, тот же синтаксис поддерживается и в Vue 3. Однако есть и новый
синтаксис под названием Composition API, который мы будем использовать в этой книге.
API-интерфейс Options унаследован от Vue 2 и предписывает, чтобы компонент определялся объектом с
определенные поля, ни одно из которых на самом деле не является обязательным.
Более того, некоторые из них имеют определенные параметры
и ожидаемые результаты. Например, это наиболее распространенные поля (также неэксклюзивный список):
• данные должны быть функцией, возвращающей объект, поля которого станут реактивными переменными.
• методы — объект, содержащий наши функции. Эти функции имеют доступ к реактивному
переменные из данных, используя формат this.variableName
Компоненты — это объект, в котором каждое поле содержит имя шаблона и значение.
указывает на конструктор другого компонента (дочернего по отношению к текущему).
• вычисляемый — объект, атрибуты которого определяют «вычисляемые» свойства. Каждый член тогда является
функция или объект, который можно использовать в качестве реактивных переменных в нашем шаблоне и коде. Функции
будут доступны только для чтения, и объекты могут включать в себя логику для чтения и записи в них значений. Эта концепция
будет разъяснено, когда мы увидим примеры кода в главе 3 «Настройка рабочего проекта».
• реквизиты и эмитты объявляют параметры для получения данных от родительского компонента и объявления
события, которые отправляются родительскому компоненту. Это формальный способ общения.
и передавать данные между связанными компонентами, но, как мы увидим в главе 7, он не единственный,
Управление потоками данных.
• Методы перехватчиков жизненного цикла — это серия функций, которые запускаются в течение жизненного цикла
компонент.
• Миксины — это объекты, описывающие общую функциональность, которая может использоваться несколькими
компоненты. Это не единственный способ повторного использования кода во Vue 3. Использование миксинов в настройках.
API вызвал некоторые сложности, которые привели к созданию Composition API. Мы не будем иметь дело с
миксины подробно, но мы увидим и другие подходы к разделению функциональности между компонентами.
(например, «составные предметы»).
Этот синтаксис четко определен, но имеет некоторые ограничения. Для мелких компонентов это слишком много строительных лесов.
кода, а для больших компонентов организация кода сильно страдает и становится очень многословной. Плюс по порядку
для ссылки на реактивные переменные, объявленные в разделе данных или других методах, внутренний код
необходимо использовать ключевое слово this (например, this.data_variable_name или this.myMethod()).
Ключевое слово this относится к созданному экземпляру компонента. Проблема в том, что зарезервированный
слово это меняет значение в зависимости от сферы и контекста использования. Есть и другие недостатки
которые появились с течением времени и привели к созданию Composition API. Однако этот синтаксис
актуален и полностью поддерживается Vue 3. Одним из преимуществ этого является то, что вы можете легко перенести код.
из Vue 2 (с учетом некоторых соображений, как показано ниже в Приложении «Миграция с Vue 2»).
API композиции предоставляет метод под названием Setup(), который выполняется до того, как компонент будет
установлен. В этом методе мы импортируем функции и компоненты, объявляем переменные и т. д., что
определите наш компонент вместо того, чтобы объявлять его как «опции». Это означает, что вы можете написать свой код
в большей степени в стиле JavaScript. Это дает вам свободу импортировать, повторно использовать и лучше организовывать ваш код.
Давайте посмотрим сравнение двух подходов с реактивной переменной _hello="Hello
Мир":
Options API
<script>
export default{
data(){return {_hello:"Hello World"}}
}
</script>Composition API
<script>
import {ref} from "vue"
export default{
setup(){
const _hello=ref("Hello World")
return {_hello}
}
}
</script>В API параметров мы просто используем поле данных, чтобы вернуть объект, поля которого превратятся в реактивные.
переменные. Vue позаботится об интерпретации объекта. Однако обратите внимание, как в Composition API
нам нужно сначала импортировать из Vue конструктор ref, который создаст реактивную константу или переменную.
для нас. Конечный результат тот же, но здесь мы имеем более тонкий контроль над тем, что и где делается.
При использовании нового упаковщика Vite этот точный контроль над тем, что импортируется в наши компоненты, может
приводят к более быстрому созданию кода и времени разработки.
На первый взгляд кажется, что Composition API более многословен, чем Options API, и это так.
для такого тривиального примера. Однако по мере того, как наш компонент начинает расти, ситуация становится противоположной.
Тем не менее, многословно... Итак, существует альтернативный синтаксис для Composition API, называемый настройкой сценария, и он
тот, который мы будем использовать в этой книге. Давайте теперь сравним, как этот компонент выглядит с новым синтаксисом:
Composition API – script setup
<script setup>
import {ref} from "vue"
const _hello=ref("Hello World")
</script>Две строчки кода! Это трудно победить. Поскольку мы добавили атрибут setup в тег скрипта,
упаковщик знает, что все, что мы здесь делаем, находится в области Composition API, и все функции,
переменные и константы автоматически предоставляются шаблону. Нет необходимости определять экспорт.
Если нам что-то нужно, мы импортируем это напрямую и используем. Кроме того, теперь у нас есть несколько дополнительных преимуществ,
например следующее:
• В нашем шаблоне могут отображаться реактивные и нереактивные переменные.
• Мы знаем, что весь код выполняется до монтирования компонента.
• Синтаксис ближе к ванильному JavaScript (большой плюс!!!), поэтому мы можем организовать наш код по нашему
удобство и удовольствие
• Меньший размер пакета (я уже упоминал об этом раньше? Да, это важно!)
Но подождите, вы можете заметить, что я определяю реактивную переменную как константу! Да, я! И нет, это
не ошибка. В JavaScript константа указывает на определенное неизменяемое значение, которым в данном случае является
объект, но это относится только к объекту, а не к его членам. Конструктор ref() возвращает
объект, поэтому константа применяется к ссылке на объект, и мы можем изменить значение ее членов.
Если вы работали с указателями в Java, C или аналогичном языке, вы можете узнать эту концепцию как
использование указателей. Но все это обходится дорого. Чтобы получить доступ к значению и изменить его, теперь нам нужно
для доступа к атрибуту значения из объекта. Вот пример:
_hello.value="Some other value";Но при этом ничего не изменилось в способе доступа к этой переменной в шаблоне:
<div>{{_hello}}</div>Короче говоря, каждый раз, когда переменная объявляется как реактивная с помощью конструктора ref(), вам необходимо
ссылайтесь на его значение в формате имя_константы.значение, и точно так же, как имя_константы в
шаблон (HTML). Когда в шаблоне используется имя константы, Vue уже знает, как это сделать.
получите доступ к значению, и вам не нужно явно ссылаться на него, как в JavaScript.
Примите соглашение о коде, чтобы вы знали, когда идентификатор относится к переменной, константе,
функция, класс и так далее.