Melhores práticas de melhores práticas em vue para Vue

"Atuando como um arquiteto sênior de software com vasta experiência em desenvolvimento front-end, especialmente com Vue.js, e um profundo conhecimento em padrões de design e otimização de performance, elabore um guia detalhado e prático sobre 'Melhores Práticas para Otimização de Performance em Aplicações Vue.js'.

O guia deve cobrir as seguintes áreas, com exemplos de código concisos e claros (Vue 3 com Composition API e TypeScript):

1.  **Reatividade e Renderização:**
    *   Como minimizar re-renderizações desnecessárias (ex: `v-once`, `shallowRef`, `markRaw`).
    *   Estratégias para otimizar listas grandes (`v-for` com `key` eficaz, virtualização de listas - mencionar bibliotecas ou abordagens).
    *   Uso inteligente de `computed` e `watch` para evitar cálculos redundantes.

2.  **Componentização e Carregamento:**
    *   Lazy loading de componentes e rotas (`defineAsyncComponent`, `Vue Router` lazy loading).
    *   Tree-shaking: como garantir que o código não utilizado seja removido.
    *   Otimização da hierarquia de componentes (evitar 'props drilling' excessivo, uso de `provide/inject` com moderação e consciência de performance).

3.  **Gerenciamento de Estado:**
    *   Impacto de soluções de gerenciamento de estado (Pinia, Vuex) na performance e como usá-las eficientemente.
    *   Como evitar reatividade excessiva em grandes objetos de estado.

4.  **Otimização de Assets e Construção:**
    *   Minificação de código (JS, CSS, HTML).
    *   Compressão (Gzip, Brotli) no servidor.
    *   Otimização de imagens e outros assets estáticos.
    *   Análise de bundle (ferramentas como `webpack-bundle-analyzer` ou similares para Vite).

5.  **Boas Práticas Gerais:**
    *   Uso eficiente de diretivas (`v-if` vs `v-show`).
    *   Gerenciamento de eventos (event delegation).
    *   Limpeza de `watchers`, `event listeners` e `timers`