Если вы недавно работали с 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:
- Объявление именованного экспорта
- Создание глобальных побочных эффектов, которые выполняются только один раз.
Это можно сделать, добавив нормальный блок <script>
вместе с настройкой скрипта, подобным этой.
И вот оно!
В настоящее время эта настройка скрипта предоставляется только по запросу, поэтому, если вы хотите попробовать ее, просто добавьте настройку в свой тег скрипта.
OR…
Если вы никогда не хотите об этом думать и просто хотите написать свой код так, как вы привыкли, дерзайте. Выбор остается за вами.
Чтобы узнать больше о настройке скрипта, вот ссылка на полный RFC с его мотивами, точным синтаксисом и другими техническими реализациями.
Итак, это все для этой статьи, я надеюсь, что она помогла прояснить, что это за новый синтаксис внутри вашего приложения Vite!
Если у вас есть вопросы, оставьте их в комментариях ниже!
Первоначально опубликовано на https://learnvue.co 14 мая 2021 г.