JSX / TSX
JSX — это XML-подобное расширение JavaScript, которое позволяет нам писать такой код:
Внутри выражений JSX используйте фигурные скобки для встраивания динамических значений:
create-vueи Vue CLI имеют варианты создания проектов с предварительно настроенной поддержкой JSX. @vue/babel-plugin-jsx Если вы настраиваете JSX вручную, подробности см. в документации
Хотя JSX впервые был представлен в React, на самом деле он не имеет определенной семантики времени выполнения и может быть скомпилирован в различные выходные данные. Если вы раньше работали с JSX, обратите внимание, что преобразование JSX Vue отличается от преобразования JSX React, поэтому вы не можете использовать преобразование JSX React в приложениях Vue
Некоторые заметные отличия от React JSX включают в себя:
- Вы можете использовать атрибуты HTML, такие как class и for в качестве реквизита — нет необходимости использовать className или htmlFor
- Передача потомков компонентам (т.е. слотам) работает по-другому .
Прохождение Слотов
Передача дочерних элементов компонентам работает немного иначе, чем передача дочерних элементов элементам. Вместо массива нам нужно передать либо функцию слота, либо объект функции слота. Функции слотов могут возвращать все, что может возвращать обычная функция рендеринга, что всегда будет нормализовано к массивам vnodes при доступе к дочернему компоненту
JSX-эквивалент:
Передача слотов как функций позволяет лениво вызывать их дочерним компонентом. Это приводит к тому, что зависимости слота отслеживаются дочерним элементом, а не родительским, что приводит к более точным и эффективным обновлениям.
Определение типа Vue также обеспечивает вывод типа для использования TSX. При использовании TSX обязательно укажите "jsx": "preserve" в tsconfig.json, чтобы TypeScript оставил синтаксис JSX нетронутым для обработки преобразования Vue JSX.
Вывод типа JSX
Подобно преобразованию, JSX Vue также нуждается в других определениях типов.
Начиная с Vue 3.4, Vue больше не регистрирует глобальное JSXпространство имен неявно. Чтобы указать TypeScript использовать определения типов JSX Vue, обязательно включите в свой файл следующее tsconfig.json
Вы также можете подписаться на рассылку для каждого файла, добавив комментарий /* @jsxImportSource vue */ вверху файла
Если есть код, который зависит от наличия глобального JSX пространства имен, вы можете сохранить точное глобальное поведение до версии 3.4, явно импортировав или ссылаясь vue/jsxна свой проект, который регистрирует глобальное JSX пространство имен.