0Pricing
Vue Academy · Aula

Macros do Vue e propostas da comunidade

Biblioteca vue-macros, defineModel experimental, defineOptions e propostas para setupSFC.

Macros do Vue e propostas da comunidade é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Macros do compilador no bloco de configuração

No <script setup>, o Vue fornece macros do compilador — funções como defineProps e defineEmits que são processadas em tempo de compilação, não importadas em tempo de execução. O Vue 3.4 e versões posteriores adicionaram mais macros, e o projeto comunitário vue-macros experimenta outras ainda.

vue-macros: um laboratório de experimentação

vue-macros é uma biblioteca da comunidade que oferece macros experimentais antes do núcleo do Vue (ou além dele). Algumas ideias bem-sucedidas acabam sendo incorporadas ao núcleo — defineModel começou aqui antes de se tornar estável.

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

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

defineModel: a forma antiga

Antes de defineModel, implementar v-model em um componente significava declarar uma propriedade modelValue e emitir update:modelValue manualmente — algo prolixo e sujeito a erros.

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

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

defineModel: estável no Vue 3.4

defineModel tornou-se estável no Vue 3.4. Ele retorna uma referência gravável que é automaticamente vinculada à propriedade e ao evento de atualização. Lê-la fornece o valor; atribuir algo a ela emite a atualização.

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

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

defineModel nomeado e tipado

defineModel é compatível com modelos nomeados (v-model:title) e opções como required e um tipo, seguindo o padrão de defineProps.

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

Vários modelos bidirecionais com facilidade

Com modelos nomeados, um componente pode expor várias vinculações bidirecionais de forma clara — algo que antes exigia muitos pares de propriedades e eventos.

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

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

defineOptions

defineOptions (estável no Vue 3.3) permite definir opções do componente, como name e inheritAttrs, diretamente dentro de <script setup>, eliminando a necessidade de um segundo bloco <script>.

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

Por que name e inheritAttrs são importantes

O name de um componente ajuda nas ferramentas de desenvolvimento, na recursão e na inclusão/exclusão de <KeepAlive>. inheritAttrs: false impede o repasse automático de atributos, para que você possa colocá-los em um elemento interno específico usando v-bind="$attrs".

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

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

Outras macros importantes

O Vue também oferece defineExpose (controla o que uma referência do componente pai pode acessar), defineSlots (tipa os espaços de conteúdo) e withDefaults (define valores padrão para propriedades baseadas em tipos). Conhecer esses recursos completa o conjunto de ferramentas de <script setup>.

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

Experimental ou estável: escolha com cuidado

As macros estáveis do núcleo (defineModel, defineOptions) são seguras para produção. Os experimentos do vue-macros são úteis para prototipagem e adoção antecipada, mas as APIs podem mudar — controle seu uso com cuidado em aplicativos distribuídos.

Acompanhando propostas da comunidade

Novas ideias surgem como propostas formais e no vue-macros. Acompanhar essas iniciativas ajuda você a antecipar os rumos da estrutura e permite enviar comentários antes que os recursos se estabilizem.

Verificação rápida

Teste sua compreensão das macros do Vue.

Recapitulação

Você aprendeu sobre macros e propostas:

  • vue-macros abriga macros experimentais; algumas são incorporadas ao núcleo
  • defineModel (estável na versão 3.4) simplifica o v-model dos componentes
  • Modelos nomeados e tipados permitem várias vinculações bidirecionais simples
  • defineOptions define name/inheritAttrs em <script setup>
  • Prefira macros estáveis em produção; trate os experimentos com cuidado

Perguntas Frequentes

A aula “Macros do Vue e propostas da comunidade” é grátis?

Sim — o texto completo de “Macros do Vue e propostas da comunidade” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Macros do Vue e propostas da comunidade”?

Biblioteca vue-macros, defineModel experimental, defineOptions e propostas para setupSFC. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Macros do Vue e propostas da comunidade”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Modo Vapor do Vue: otimização em tempo de compilação
  2. Ecossistema Vite: plugins e ferramentas
  3. Macros do Vue e propostas da comunidade
  4. Escolha da stack Vue adequada para 2025+
← Voltar para Vue Academy