Melhores práticas de otimização e performance em vue para Vue

"Atuando como um especialista em otimização de performance para aplicações Vue.js, sua tarefa é analisar um cenário comum de 'renderização excessiva' (excessive re-rendering) em um componente Vue.js. Crie um guia passo a passo detalhado para identificar, diagnosticar e aplicar as melhores práticas de otimização para mitigar esse problema.

**Cenário do Problema:**

Um componente `UserProfileCard.vue` exibe informações de um usuário (nome, email, foto, lista de amigos) e é renderizado dentro de um `v-for` para uma lista de 100 usuários. A cada vez que um usuário clica em um botão de 'curtir' (like) em *qualquer* `UserProfileCard` (o que atualiza um contador de likes no objeto do usuário correspondente), *todos* os 100 `UserProfileCard`s são re-renderizados, mesmo que apenas um tenha tido seus dados alterados. Isso causa um atraso perceptível na interface do usuário.

**Seu Guia Deve Conter:**

1.  **Identificação:** Como o desenvolvedor pode perceber que há um problema de renderização excessiva (ferramentas, padrões de comportamento).
2.  **Diagnóstico:**
    *   Quais ferramentas do Vue Devtools (ou outras) seriam usadas para confirmar o re-render desnecessário?
    *   Como interpretar os dados coletados para pinpointar a causa raiz?
3.  **Soluções e Melhores Práticas (com exemplos de código onde aplicável):**
    *   Uso de `v-once`.
    *   Estratégias com `v-if` / `v-show`.
    *   Otimização de `key` em `v-for`.
    *   Técnicas de memoização (ex: `computed` properties avançadas, bibliotecas como `vue-use/core` ou `lodash/memoize`).
    *   Componentes funcionais (stateless functional components) – quando e por que usar.
    *   `shouldComponentUpdate` / `PureComponent` (conceitos análogos em Vue, como `shallowRef` ou `markRaw` para otimizações de reatividade).
    *   Uso de `defineAsyncComponent` e