0Pricing
Vue Academy · Урок

Макросы Vue и предложения сообщества

Библиотека vue-macros, экспериментальные defineModel, defineOptions и предложения setupSFC

«Макросы Vue и предложения сообщества» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Макросы компилятора в script setup

В <script setup> Vue предоставляет макросы компилятора — такие функции, как defineProps и defineEmits, которые обрабатываются на этапе компиляции, а не импортируются во время выполнения. Начиная с Vue 3.4 появились и другие макросы, а проект сообщества vue-macros экспериментирует с ещё большим их количеством.

vue-macros: площадка для экспериментов

vue-macros — библиотека сообщества, в которой доступны экспериментальные макросы, опережающие возможности основного Vue или выходящие за их пределы. Успешные идеи иногда переходят в ядро Vue: например, defineModel появился здесь, прежде чем стать стабильным.

// vite.config
import VueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [VueMacros({ plugins: { vue: vue() } })]
})

defineModel: прежний подход

До появления defineModel, чтобы реализовать v-model в компоненте, нужно было объявить свойство modelValue и вручную отправлять событие update:modelValue — это приводило к большому объёму кода и ошибкам.

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>

defineModel: стабильный API в Vue 3.4

defineModel стал стабильным в Vue 3.4. Он возвращает изменяемый объект ref, автоматически связанный со свойством и событием обновления. При чтении Вы получаете значение, а при присваивании отправляется событие обновления.

<script setup>
const model = defineModel()
// model.value reads modelValue
// model.value = x emits update:modelValue
</script>

<template>
  <input v-model="model" />
</template>

Именованный и типизированный defineModel

defineModel поддерживает именованные модели (v-model:title) и такие параметры, как required, а также тип, подобно defineProps.

<script setup>
const title = defineModel('title', { type: String, required: true })
const count = defineModel('count', { default: 0 })
</script>

Несколько v-model без лишних сложностей

С именованными моделями компонент может аккуратно предоставлять несколько двусторонних привязок — раньше для этого требовалось создавать множество пар свойств и событий.

<!-- parent -->
<UserForm v-model:name="name" v-model:email="email" />

<!-- UserForm script setup -->
<!-- const name = defineModel('name') -->
<!-- const email = defineModel('email') -->

defineOptions

defineOptions (стабильный API начиная с Vue 3.3) позволяет задавать параметры компонента, например name и inheritAttrs, прямо внутри <script setup>, избавляя от необходимости во втором блоке <script>.

<script setup>
defineOptions({
  name: 'UserCard',
  inheritAttrs: false
})
</script>

Зачем нужны name и inheritAttrs

Свойство name компонента помогает инструментам разработчика, рекурсивному использованию и настройке include/exclude у <KeepAlive>. Значение inheritAttrs: false отключает автоматическую передачу атрибутов, поэтому Вы можете разместить их на определённом внутреннем элементе с помощью v-bind="$attrs".

<script setup>
defineOptions({ inheritAttrs: false })
</script>

<template>
  <div class="wrapper">
    <input v-bind="$attrs" />
  </div>
</template>

Другие важные макросы

Vue также предоставляет defineExpose (управление тем, к чему может обращаться ref родительского компонента), defineSlots (типизация слотов) и withDefaults (значения по умолчанию для свойств на основе типов). Знание этих макросов дополняет набор инструментов <script setup>.

<script setup lang="ts">
const props = withDefaults(
  defineProps<{ size?: 'sm' | 'lg' }>(),
  { size: 'sm' }
)
defineExpose({ focus })
</script>

Экспериментальные и стабильные возможности: выбирайте внимательно

Стабильные макросы ядра (defineModel, defineOptions) безопасны для рабочей среды. Эксперименты vue-macros полезны для создания прототипов и раннего внедрения, но их API может измениться — поэтому в выпускаемых приложениях используйте их с осторожностью.

Следите за предложениями сообщества

Новые идеи появляются в RFC и в vue-macros. Следя за ними, Вы сможете предвидеть направление развития фреймворка и высказать свои предложения до стабилизации функций.

Быстрая проверка

Проверьте, насколько хорошо Вы поняли макросы Vue.

Итоги

Вы узнали о макросах и предложениях по развитию:

  • vue-macros содержит экспериментальные макросы, некоторые из которых переходят в ядро;
  • defineModel (стабильный API начиная с версии 3.4) упрощает использование v-model в компонентах;
  • именованные и типизированные модели позволяют создавать несколько удобных двусторонних привязок;
  • defineOptions задаёт name и inheritAttrs в <script setup>;
  • в рабочей среде отдавайте предпочтение стабильным макросам, а к экспериментальным относитесь осторожно.

Часто задаваемые вопросы

Урок «Макросы Vue и предложения сообщества» бесплатный?

Да — полный текст урока «Макросы Vue и предложения сообщества» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Макросы Vue и предложения сообщества»?

Библиотека vue-macros, экспериментальные defineModel, defineOptions и предложения setupSFC Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Макросы Vue и предложения сообщества»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Режим Vue Vapor: оптимизация на этапе компиляции
  2. Экосистема Vite: плагины и инструменты
  3. Макросы Vue и предложения сообщества
  4. Как выбрать подходящий стек Vue для 2025 года и далее
← Назад к Vue Academy