Во время Дня участников Vue Эван Ю объявил, что функция Настройка сценария выходит из стадии бета-тестирования и готова к работе.

Обновление: оно уже выпущено. Здесь информация журнала изменений.

Отлично, но что с этим делать?

Поэтому с новым Vue Composition API появилась новая опция компонента setup. Что он делает под капотом, так это возможность обрабатывать всю логику до того, как компонент будет создан, и, не касаясь этогооператора. Наряду с этим был представлен новый API реактивности с ref, реактивными, вычисляемыми методами, новыми переопределенными хуками жизненного цикла и так далее — подробнее об этом можно прочитать здесь. Благодаря этим новым возможностям вы можете заблокировать всю логику вашего компонента внутри одной опции, подходя к ней более функционально-ориентированным образом. Конечно, вы по-прежнему можете использовать другие параметры компонента, такие как created или методы, но таким образом вы испортите структуру своего компонента, а читабельность будет еще хуже — субъективное мнение.

Типичная нотация будет выглядеть примерно так.

Но так как вся логика вашего компонента теперь — обычно — размещена в опции установки, более того, у вас есть все хуки жизненного цикла, доступные из нее, вся оболочка и другие (старые) опции компонента больше не нужны. Так почему бы не упростить это и не создать что-то подобное.

Блестящий. 😏 🤔 Прежде чем весь энтузиазм, давайте погрузимся в него.

Теперь вы можете разместить всю свою логику внутри тега script. Верно, скажете вы. Но это немного другое, как насчет реквизита или компонентов и так далее…

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

Однако данные компонента будут личными. Если вы хотите показать его родителю, используя $parent или refs, вам понадобится специальное определение для этого.

Персональный отказ от ответственности: если честно, это не лучшая идея для доступа к данным компонента таким образом. У вас нет полного контроля над ним и, наконец, вы не можете сказать, откуда он взялся. В то же время такой тип связи с компонентами неестественен.

Реквизит.

Чтобы определить реквизиты, вам нужно использовать специальный метод defineProps, который доступен глобально, и вам не нужно его импортировать. Кроме того, с помощью TypeScript вы можете определить для них типы. Так.

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

{ count?: number }

Да, а как насчет значений по умолчанию, мы все их используем… Чтобы использовать значения по умолчанию§, вам понадобится дополнительная функция/метод-оболочка, называемая withDefaults.

Компоненты.

С компонентами еще проще. Вам просто нужно их импортировать. Нет необходимости использовать дополнительный объект components для передачи их в шаблон.

То же самое с динамическими компонентами. Вам просто нужно определить его в шаблоне с известной нотацией. Так.

<component :is="Component" />

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

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

Нет вариантов настройки.

Итак, если мы закроем нашу логику в параметре настройки внутри тега скрипта, то как определить дополнительные данные, такие как имя компонента? Вы можете сделать это, определив дополнительный тег скрипта внутри вашего компонента. Он будет «объединен» с нотацией <script setup>, и ваши внешние данные настройки будут защищены. Как этот.

Дополнительные возможности.

Это все еще экспериментальный вариант, но с настройкой скрипта вы можете использовать await, не определяя async в другом месте ранее. Здесь стоит упомянуть одну вещь: вам нужно будет использовать его с режимом Suspense, который ожидает релиза. Вот почему это экспериментально. Код будет представлять что-то вроде этого.

Подробнее о Suspense вы можете узнать здесь.

Доступность.

У меня для вас отличные новости. Эта функция, конечно, родная для Vue 3, но вы также можете использовать ее с Vue 2… и другими. С помощью этого специального плагина вы можете установить его даже для Nuxt, Vite to Vue CLI. Потрясающий!

Заключительные мысли.

Для меня это очень увлекательно. Изменение подхода к написанию и определению компонентов Vue с помощью Composition API было чем-то новым, свежим и интересным. Теперь с помощью настройки сценария мы можем еще больше упростить и сжать наш код. Написание его более последовательным образом, с упором на лучшую масштабируемость и модульность может оказаться большим приключением. А в сочетании с такими инструментами, как Vue Use или вашими собственными компоновщиками, это становится очень мощным решением. Прохладный!

В то же время это что-то новое. Для тех, кто любил компоненты Vue, читабельность, простота внедрения и управление параметрами могут быть чем-то странным и неприемлемым. Здесь я могу отправить вас на Введение в Composition API, где основная команда объясняет всю его концепцию и все преимущества. Если он вам не подходит, вы все равно можете использовать старый добрый Vue Component Options API — без использования настройки скрипта или каких-либо других хитростей. В самом конце я могу попросить вас дать ему шанс. Попробуйте, может быть, вы сами убедитесь, что это не для вас и это нормально. Но, может быть, вы окунетесь во что-то новое, что освежит и переопределит ваше ежедневное развитие.

Спасибо, наслаждайтесь. Может, подумайте о том, чтобы купить мне кофе.