Componentes
Componentes em Vue.js são blocos independentes e reutilizáveis que encapsulam template, lógica e estilo. Eles permitem criar interfaces modulares, facilitando manutenção, escalabilidade e testes em aplicações complexas. A utilização de componentes é essencial quando se deseja renderizar elementos de forma dinâmica, dividir responsabilidades ou reutilizar padrões de UI em várias partes do sistema.
No desenvolvimento avançado em Vue.js, é fundamental compreender conceitos como Props para passagem de dados do componente pai para o filho, Emits para emissão de eventos do filho para o pai, reactive state para gerenciamento de dados reativos, computed properties para cálculos derivados, e lifecycle hooks para controlar o ciclo de vida dos componentes. Além disso, princípios de programação orientada a objetos, algoritmos eficientes e estruturas de dados bem definidas ajudam a manter a performance e a robustez da aplicação.
Neste tutorial, você aprenderá a criar, registrar e organizar componentes, gerenciar comunicação entre eles, usar slots e dynamic components, além de lidar com problemas comuns como memory leaks, má manipulação de erros e algoritmos ineficientes. Ao final, você terá a capacidade de desenvolver aplicações Vue.js complexas, integrando componentes de forma eficiente dentro da arquitetura do sistema e garantindo código limpo, performático e escalável.
Exemplo Básico <template>
text<div id="app">
<UserCard :user="userInfo" @greet="handleGreet"/>
</div>
</template>
<script>
import { defineComponent, reactive } from 'vue';
const UserCard = defineComponent({
name: 'UserCard',
props: {
user: { type: Object, required: true }
},
emits: ['greet'],
setup(props, { emit }) {
const greetUser = () => {
emit('greet', `Olá ${props.user.name}!`);
};
return { greetUser };
},
template: `
<div class="user-card">
<h2>{{ user.name }}</h2>
<p>{{ user.role }}</p>
<button @click="greetUser">Saudar</button>
</div>`
});
export default defineComponent({
name: 'App',
components: { UserCard },
setup() {
const userInfo = reactive({ name: 'João', role: 'Desenvolvedor' });
const handleGreet = message => {
console.log(message);
};
return { userInfo, handleGreet };
}
});
</script>
<style scoped>
.user-card {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
</style>Neste exemplo, UserCard é um componente que recebe dados via Props e emite eventos com Emits. O método greetUser dispara um evento personalizado que o componente pai captura. O componente pai App utiliza reactive state para armazenar dados do usuário e registra um handler para processar a saudação. Este padrão demonstra encapsulamento, fluxo de dados unidirecional e uso da Composition API, permitindo maior previsibilidade, modularidade e reuso de código em aplicações reais.
Exemplo Prático <template>
text<div id="app">
<UserList :users="userList" @userSelect="handleSelect"/>
</div>
</template>
<script>
import { defineComponent, reactive, computed } from 'vue';
const UserList = defineComponent({
name: 'UserList',
props: { users: { type: Array, required: true } },
emits: ['userSelect'],
setup(props, { emit }) {
const sortedUsers = computed(() => {
return [...props.users].sort((a, b) => a.name.localeCompare(b.name));
});
const selectUser = user => {
if (!user) throw new Error('Usuário inválido');
emit('userSelect', user);
};
return { sortedUsers, selectUser };
},
template: `
<ul>
<li v-for="user in sortedUsers" :key="user.id" @click="selectUser(user)">
{{ user.name }} - {{ user.role }}
</li>
</ul>`
});
export default defineComponent({
name: 'App',
components: { UserList },
setup() {
const userList = reactive([
{ id: 1, name: 'João', role: 'Desenvolvedor' },
{ id: 2, name: 'Maria', role: 'Designer' },
{ id: 3, name: 'Carlos', role: 'Gerente' }
]);
const handleSelect = user => {
console.log('Usuário selecionado:', user);
};
return { userList, handleSelect };
}
});
</script>Este exemplo avançado apresenta componentes que implementam algoritmos de ordenação e princípios OOP. A computed property sortedUsers ordena a lista sem alterar o array original, garantindo reatividade. O método selectUser inclui tratamento robusto de erros. O uso de key no v-for otimiza a renderização do DOM. Este padrão é útil em dashboards, tabelas e listas interativas de grande volume de dados, demonstrando boas práticas de performance, modularidade e manutenibilidade.
Melhores práticas e armadilhas comuns em Vue.js:
- Usar defineComponent e setup para Composition API.
- Definir tipos de Props para dados previsíveis.
- Declarar Emits para eventos personalizados.
- Utilizar reactive e computed para dados reativos.
- Sempre incluir key em listas para renderização eficiente.
Evitar: uso excessivo de variáveis globais (memory leaks), não tratar erros, algoritmos ineficientes e comunicação inadequada entre componentes. Para depuração, utilize Vue Devtools. Para otimização, considere lazy loading, componentes assíncronos e watchers específicos. Segurança: cuidado com v-html e validação de inputs.
📊 Tabela de Referência
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| Nome do Componente | Identificação e registro do componente | name: 'UserCard' |
| Props | Envio de dados do pai para o filho | props: { user: Object } |
| Emits | Emissão de eventos do filho para o pai | emits: ['greet'] |
| Reactive state | Gerenciamento de estado reativo | const state = reactive({ count: 0 }) |
| Computed | Cálculos derivados reativos | const sorted = computed(() => items.sort()) |
| Lifecycle Hooks | Controle do ciclo de vida | onMounted(() => { console.log('mounted') }) |
Componentes em Vue.js permitem criar aplicações modulares, escaláveis e de fácil manutenção. Props, Emits, reactive state, computed properties e lifecycle hooks são os pilares desse paradigma. Próximos passos incluem estudar dynamic components, named e scoped slots, componentes assíncronos e padrões avançados da Composition API. Aplicar esses conceitos em projetos reais aumenta a robustez e eficiência da aplicação. Referências recomendadas incluem documentação oficial do Vue.js e tutoriais avançados de design patterns.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo