0Pricing
Vue Academy · Lekcja

Makra Vue i propozycje społeczności

Biblioteka vue-macros, eksperymentalne defineModel i defineOptions oraz propozycje setupSFC.

Makra Vue i propozycje społeczności to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Makra kompilatora w script setup

W <script setup> Vue udostępnia makra kompilatora — funkcje takie jak defineProps i defineEmits, które są przetwarzane podczas kompilacji, a nie importowane w runtime. W Vue 3.4 i nowszych wersjach dodano kolejne makra, a społecznościowy projekt vue-macros służy do eksperymentowania z następnymi.

vue-macros: środowisko eksperymentów

vue-macros to biblioteka społecznościowa udostępniająca eksperymentalne makra wyprzedzające rozwiązania głównego pakietu Vue lub wykraczające poza nie. Udane pomysły czasami trafiają do głównego pakietu — defineModel powstało tutaj, zanim stało się stabilne.

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

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

defineModel: dotychczasowy sposób

Przed pojawieniem się defineModel implementacja v-model w komponencie wymagała zadeklarowania propu modelValue i ręcznego emitowania zdarzenia update:modelValue — rozwiązanie było rozwlekłe i podatne na błędy.

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

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

defineModel: stabilne od Vue 3.4

defineModel stało się stabilne w Vue 3.4. Zwraca zapisywalny ref, który jest automatycznie powiązany z propem i zdarzeniem aktualizacji. Odczyt zwraca wartość, a przypisanie do ref emituje aktualizację.

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

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

Nazwane i typowane defineModel

defineModel obsługuje nazwane modele (v-model:title) oraz opcje takie jak required i typ, analogicznie do defineProps.

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

Łatwiejsza obsługa wielu v-modeli

Dzięki nazwanym modelom komponent może w przejrzysty sposób udostępniać kilka wiązań dwukierunkowych — wcześniej wymagało to wielu par propów i zdarzeń.

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

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

defineOptions

defineOptions (stabilne od Vue 3.3) umożliwia ustawienie opcji komponentu, takich jak name i inheritAttrs, bezpośrednio w <script setup>, dzięki czemu nie jest potrzebny drugi blok <script>.

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

Dlaczego name i inheritAttrs mają znaczenie

Opcja name komponentu pomaga w narzędziach deweloperskich, rekurencji oraz konfiguracji include/exclude komponentu <KeepAlive>. inheritAttrs: false zatrzymuje automatyczne przekazywanie atrybutów, dzięki czemu mogą Państwo umieścić je na konkretnym elemencie wewnętrznym za pomocą v-bind="$attrs".

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

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

Inne ważne makra

Vue udostępnia również defineExpose (kontrolowanie tego, do czego ref rodzica ma dostęp), defineSlots (typowanie slotów) oraz withDefaults (wartości domyślne dla propsów opartych na typach). Znajomość tych makr uzupełnia zestaw narzędzi <script setup>.

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

Eksperymentalne czy stabilne: wybieraj rozsądnie

Stabilne makra głównego pakietu (defineModel, defineOptions) można bezpiecznie stosować w produkcji. Eksperymenty projektu vue-macros są przydatne podczas tworzenia prototypów i wczesnego wdrażania, ale ich API może się zmienić — w aplikacjach wdrażanych produkcyjnie należy stosować je ostrożnie.

Śledzenie propozycji społeczności

Nowe pomysły pojawiają się w RFC oraz w projekcie vue-macros. Śledzenie ich pomaga przewidywać kierunek rozwoju frameworka i umożliwia przekazywanie opinii, zanim funkcje staną się stabilne.

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat makr Vue.

Podsumowanie

Poznali Państwo makra i propozycje zmian:

  • vue-macros udostępnia eksperymentalne makra, z których część trafia później do głównego pakietu
  • defineModel (stabilne od wersji 3.4) upraszcza komponentowy v-model
  • Nazwane i typowane modele umożliwiają tworzenie wielu przejrzystych wiązań dwukierunkowych
  • defineOptions ustawia name/inheritAttrs w <script setup>
  • W produkcji należy preferować stabilne makra, a eksperymentalne stosować ostrożnie

Często zadawane pytania

Czy lekcja „Makra Vue i propozycje społeczności” jest bezpłatna?

Tak — pełny tekst „Makra Vue i propozycje społeczności” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Makra Vue i propozycje społeczności”?

Biblioteka vue-macros, eksperymentalne defineModel i defineOptions oraz propozycje setupSFC. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Makra Vue i propozycje społeczności”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Vue Vapor Mode: optymalizacja w czasie kompilacji
  2. Ekosystem Vite: wtyczki i narzędzia
  3. Makra Vue i propozycje społeczności
  4. Wybór właściwego stosu Vue na rok 2025+
← Powrót do Vue Academy