Если вы недавно работали с Vite и Vue 3, вы заметите, что, когда вы начинаете новый проект, ваш раздел скрипта выглядит так с этим синтаксисом в ваших компонентах Vue.

Вы можете спросить: «Что это? Это API параметров? Composition API? Где метод настройки? »

Тип настройки‹ скрипта ›- это предлагаемое изменение в RFC Vue Git. Чтобы было ясно, это не предназначено для полной замены любого из текущих способов написания кода. Его цель - предоставить разработчикам более сжатый синтаксис для написания их отдельных файловых компонентов.

В этой статье мы рассмотрим, как именно это работает и как это может быть полезно.

Хорошо - пошли.

Краткое изложение настройки скрипта

В <script setup> нам не нужно объявлять методы export default и setup - вместо этого все привязки верхнего уровня доступны для шаблона

В Composition API мы привыкли создавать наш метод настройки, а затем возвращать все, что мы хотим показать. Что-то вроде этого:

Но с <script setup> мы можем переписать тот же код вот так ...

И это не только данные, вычисляемые свойства и методы! Даже импортированные директивы и компоненты, которые находятся на верхнем уровне нашей области установки, автоматически доступны в нашем шаблоне.

Посмотрите на этот пример импорта компонента.

Удивительно, правда?

Итак ... какой в ​​этом смысл?

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

В точных словах RFC:

«Основная цель предложения - уменьшить количество подробностей использования Composition API внутри SFC, напрямую открывая контекст <script setup> шаблону».

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

Плюс - вы не забудете вернуть что-то из нашего метода настройки (я знаю, что делаю все время).

Более продвинутое использование ‹настройки скрипта›

Теперь, когда мы знаем, что такое <script setup> даже и почему он может быть полезен, давайте взглянем на некоторые из его более продвинутых функций.

Доступ к реквизитам, создание событий и т. Д.

В Composition API это были просто аргументы нашего метода настройки,

setup (props, context) { // context has attrs, slots, and emit }

Однако в синтаксисе настройки скрипта мы можем получить доступ к тем же параметрам с помощью 3 операций импорта из Vue.

  • defineProps - как следует из названия, позволяет нам определять свойства для нашего компонента
  • defineEmits - позволяет нам определять события, которые может генерировать наш компонент
  • useContext - дает нам доступ к слотам и атрибутам нашего компонента

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

Создание функции настройки async

Еще одна интересная особенность настройки скрипта - это то, насколько легко создать функцию асинхронной настройки.

Это полезно для загрузки в API по мере создания вашего компонента и даже для привязки вашего кода к экспериментальной функции ‹suspense›.

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

Например, если мы используем Fetch API, мы можем просто использовать await вот так…

… И наша результирующая функция setup() будет точно так же асинхронной.

Это так просто.

Использование ‹настройки скрипта› с обычным ‹script›

<script setup> создает свою собственную область сценария для привязок верхнего уровня. Но в некоторых случаях есть код, который должен выполняться в области видимости модуля.

Два конкретных примера в этом RFC:

  1. Объявление именованного экспорта
  2. Создание глобальных побочных эффектов, которые выполняются только один раз.

Это можно сделать, добавив нормальный блок <script> вместе с настройкой скрипта, подобным этой.

И вот оно!

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

OR…

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

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

Итак, это все для этой статьи, я надеюсь, что она помогла прояснить, что это за новый синтаксис внутри вашего приложения Vite!

Если у вас есть вопросы, оставьте их в комментариях ниже!

Если вы хотите узнать больше о Vue 3, загрузите мою бесплатную шпаргалку по Vue 3 с такими важными знаниями, как Composition API, синтаксис шаблона Vue 3 и обработка событий.

Первоначально опубликовано на https://learnvue.co 14 мая 2021 г.