Estratégias de Otimização em Projetos Vue
- Utilizar v-if e v-show de forma diferenciada conforme o cenário
- Escolher entre computed e watch com base nas necessidades específicas
- Sempre adicionar um valor único no key durante iterações com v-for
- Eliminar event listeners quando não forem mais necessários
- Implementar lazy loading em rotas e imagens
- Importar apenas as funcionalidades necessárias de plugins de terceiros
- Utilizar CDN para acelerar o carregamento de bibliotecas grandes durante o build
- Codificar imagens pequenas em base64 para reduzir requisições de rede
Aceleração com CDN
A implementação de uma nova camada de nós de cache na rede existente permite que os clientes acessem recursos do CDN mais próximo, reduzindo a necessidade de requisições ao servidor original e aumentando significativamente a velocidade de carregamento do site.
Por que typeof null retorna object
Esta é uma limitação histórica da linguagem JavaScript. Durante o design inicial da linguagem, não foi contemplado um tipo específico para null, tratando-o apenas como um valor especial do tipo object. Na representação binária do JavaScript, qualquer valor com os três primeiros bits como 0 é classificado como object. Como null tem todos os bits em 0, o operador typeof retorna object.
Escopo de Variáveis
O escopo define a região onde variáveis e funções são acessíveis.
Escopo Global:
Variáveis declaradas fora de funções ou blocos de código pertencem ao escopo global e podem ser acessadas de qualquer parte do código.
Escopo de Função (Local)
Variáveis declaradas dentro de uma função só podem ser acessadas dentro dessa mesma função, sendo inacessíveis externamente.
Escopo de Bloco
Com a introdução de const e let no ES6, variáveis declarados com esses dentro de chaves { } existem apenas nesse bloco de código e não são acessíveis fora dele.
Cadeia de Escopo
Ao utilizar uma variável, o primeiro local pesquisado é o escopo atual. Se não for encontrada, a busca avança para o escopo pai, continuando esse processo até alcançar o escopo global. Se a variável não existir em nenhum desses escopos, será implicitamente declarada (no caso de variáveis não estritas) ou gerará um erro.
Vuex
O que é Vuex: É um padrão de gerenciamento de estado e biblioteca para aplicações Vue.js, utilizando armazenamento centralizado para gerenciar o estado de todos os componentes. O Vuex extrai o estado compartilhado dos componentes em um único gerenciador global, permitindo que qualquer componente utilize funções e dados compartilhados.
Atributos principais: state, getters, mutations, actions, modules 1.state: Fornece uma única fonte de dados públicos, onde todos os dados compartilhados são armazenados, similar ao data em componentes Vue
2.getters: Funciona como computed em componentes, realizando cache e transformando dados compartilhados em novas informações
3.mutations: O único método permitido para modificar dados no state é através de mutations
4.actions: Similar às mutations, mas destinadas a operações assíncronas
5.modules: Permite dividir o store em módulos menores, cada um com seu próprio state, getters, mutations e actions
Para ativar a modularização: exportar com namespace: true
Métodos de Navegação entre Rotas
- Navegação declarativa: Utilizar a tag router-link com o atributo apontando para o caminho de destino. Ela é renderizada como uma tag , onde o atributo to funciona como href
- Navegação programática: this.$router.push(): Navega para uma URL específica e adiciona um registro ao histórico, permitindo retornar à página anterior com o botão de voltar this.$router.replace(): Navega para uma URL específica sem adicionar registros ao histórico, voltando à página anterior ao invés da atual this.$router.go(n): Avança ou retrocede n páginas no histórico, onde valores positivos avançam e negativos retrocedem
Guardas de Rota no Vue
Guardas globais:
- Pré-globais: beforeEach(to, from, next)
- Pós-globais: afterEach(to, from, next)
Guardas exclusivas (utilizadas por rotas específicas): beforeEnter(to, from, next)
Guardas de componente:
- Ao entrar: beforeRouteEnter(to, from, next)
- Ao sair: beforeRouteLeave(to, from, next)
Diferenças entre query e params
Query utiliza path para a introdução, enquanto params utiliza name
Ao receber parâmetros, acessa-se através de this.$route.query e this.$route.params respectivamente.
Diferenças entre $router e $route
$router é uma instância do VueRouter, utilizada principalmente para navegação entre rotas e passagem de parâmetros.
$route é um objeto de informação da rota atual, contendo dados como path, params, hash, query, fullPath, matched, name, etc.
Problemas Comuns em Vue e Soluções
1. Ao adicionar propriedades diretamente a objetos dentro de data, as novas propriedades não são reativas
Solução: Utilizar o método Vue.set(objeto, propriedade, valor) para adicionar novas propriedades de forma reativa
2. Tentar manipular o DOM no hook created resulta em erro, pois a instância Vue ainda não foi montada
Solução: Usar Vue.nextTick() para executar código após a atualização do DOM
Método Vue.set (vm.$set)
Addicionar novas propriedades diretamente a objetos ou arrays dentro de data não resulta em atualizações reativas.
vm.$set(alvo, nomePropriedade/índice, valor)
vm.$set(objeto ou array alvo, nome da propriedade ou índice, valor a ser atribuído)
Atributo scoped em style
Função: Quando a tag style possui o atributo scoped, seus estilos se aplicam apenas aos elementso do componente atual. Em projetos de página única, isso evita a poluição entre componentes e permite a modularização dos estilos.
Com o scoped, o Vue adiciona um atributo personalizado único aos elementos DOM do componente, criando um seletor de escopo e garantindo que os estilos sejam privados ao componente.
Na prática, recomenda-se adicionar o atributo scoped em todas as tags style dos componentes.
Aplicação de Página Única (SPA)
Um tipo especial de aplicação web que restringe todas as operações a uma única página web. Os recursos HTML, CSS e JavaScript são carregados apenas uma vez durante a inicialização, e as interações do usuário não resultam no recarregamento ou redirecionamento da página.
Vantagens:
Melhor experiência do usuário e velocidade, pois mudanças de conteúdo não exigem recarregamento completo da página
Redução de custos de desenvolvimento
Aumento de eficiência, sem necessidade de atualizações de pacote a cada modificação
Melhor separação entre frontend e backend, com divisão de trabalho mais clara
Desvantagens:
Velocidade de carregamento inicial mais lenta
Dificuldade para indexação por mecanismos de busca
Soluções para lenta velocidade de carregamento inicial:
1. Reduzir o tamanho do arquivo de entrada: Técnicas comuns incluem lazy loading de rotas
2. Cache local de recursos estáticos: Para recursos do backend, utilizar cache HTTP; no frontend, usar LocalStorage de forma adequada
3. Carregamento sob demanda de frameworks UI
4. Evitar empacotamento repetido de componentes: No arquivo de configuração do webpack, modificar a configuração de CommonsChunkPlugin
minChunks: 3 // Configura para extrair pacotes usados 3 vezes ou mais para um arquivo de dependência comum
5. Compressão de imagens: Reduzir a pressão nas requisições HTTP
6. Ativar GZip
7. Utilizar SSR: Rendering no servidor
DOM Virtual
O DOM virtual é um objeto JavaScript que descreve o DOM real. Por meio de um mecanismo de processamento em lote, ele atualiza múltiplas modificações do DOM em uma única operação na página, reduzindo efetivamente o número de renderizações e minimizando operações de reflow e repaint, melhorando o desempenho de renderização.
Quanto mais operações de DOM real, maior o impacto no desempenho. A manipulação de dados apresenta muito menos perda de desempenho, e o uso de DOM virtual aumenta a eficiência de renderização.
Por que usar DOM virtual:
1. Garantir um desempenho mínimo, fornecendo performance razoável sem otimizações manuais
O processo de renderização da página: Parsear HTML -> Gerar DOM -> Gerar CSSOM -> Layout -> Paint -> Compiler
Ao comparar modificações de DOM entre operações em DOM real e DOM virtual, analisando o custo de reflow e repaint:
DOM real: Gerar string HTML + reconstruir todos os elementos DOM
DOM virtual: Gerar VNode + DOM diff + Atualizações DOM necessárias
O preparo para atualizações do DOM virtual consome mais tempo (no nível JavaScript), mas em comparação com múltiplas operações DOM, esse custo é significativamente menor.
2. Multiplataforma: O DOM virtual, sendo essencialmente um objeto JS, pode ser facilmente operado em diferentes plataformas, como: rendering no servidor, uniapp, etc.
O DOM virtual realmente é mais performático que o DOM real?
Na renderização inicial de grande quantidade de elementos, a presença de uma camada adicional de cálculo do DOM virtual torna mais lenta que a inserção direta via innerHTML.
O DOM virtual garante um desempenho mínimo, enquanto otimizações manuais em operações de DOM real podem ser ainda mais rápidas e performáticas.
Diferenças entre os algoritmos diff do Vue 2 e Vue 3
Algoritmo diff do Vue 2:
O Vue 2 utiliza o algoritmo diff clássico, também conhecido como algoritmo patch de comparação de pontas duplas. Este algoritmo percorre as árvores de DOM virtual antigas e novas, comparando seus nós individualmente e realizando as operações correspondentes de inserção, atualização e exclusão.
A desvantagem deste algoritmo é que ao comparar árvores de DOM virtual de grande escala, ele pode gerar muitas comparações desnecessárias, resultando em queda de performance. Ele exige uma travessia em profundidade de toda a árvore, sem aproveitar as características estruturais para otimização.
Algoritmo diff do Vue 3:
O Vue 3 utiliza um algoritmo diff baseado em objetos Proxy do ES6, conhecido como algoritmo de atualização incremental. Ele rastreia as dependências para determinar quais nós precisam ser re-renderizados, atualizando apenas esses nós em vez de comparar toda a árvore.
A vantagem deste algoritmo é que ele pode pular sub-árvores que não precisam de atualização durante o processo de renderização, melhorando o desempenho. Ele também pode utilizar informações adicionais, como opções e estado dos componentes, para realizar comparações e atualizações mais inteligentes.
Além disso, o Vue 3 introduziu uma nova técnica de otimização de compilação chamada static hoisting, que pode reduzir ainda mais as operações diff em tempo de execução, melhorando o desempenho.
Princípio do $nextTick
O Vue executa operações de forma assíncrona, controlando atualizações de DOM e callbacks do nextTick através de uma fila, garantindo que as atualizações de DOM ocorram antes da execução dos callbacks.
Contagem de Ocorrências de Caracteres em uma String
function contarCaracteres(texto) {
const frequencia = {}
for (let i = 0; i < texto.length; i++) {
const caractere = texto.charAt(i)
if (frequencia[caractere]) {
frequencia[caractere]++
} else {
frequencia[caractere] = 1
}
}
return frequencia
}
console.log(contarCaracteres("exemplo de texto para contar caracteres"))
Diferenças entre Vue 2 e Vue 3
- Princípio de reatividade diferente: O Vue 2 utiliza Object.defineProperty() para interceptar dados combinado com o padrão publish-subscribe. O Vue 3 usa a API Proxy para代理 dados, envovlendo cada objeto com um Proxy através da função reactive() para monitorar mudanças nas propriedades.
- Vue 3 suporta fragmentação: permite múltiplos nós raiz
- Diferenças na definição de dados e métodos: Vue 2 usa API de opções, Vue 3 usa API Composição
- Alterações nos hooks de ciclo de vida
- Mudanças na comunicação entre componentes pai e filho
Vantagens do Vue 3
- Melhor desempenho: 1.2 a 2 vezes mais rápido que o Vue 2
- Menor tamanho de pacote final: o Vue 3 removeu APIs menos utilizadas, empacotando apenas os módulos utilizados
- Suporte à API Composição: enquanto o Vue 2 usa API de opções, o Vue 3 usa API Composição
- Melhor suporte a TypeScript
- Novos componentes úteis: Fragment (componente fragmento), Teleport (componente de teletransporte), Suspense (componente de suspensão)
Vantagens da API Composição do Vue 3
A API de Opções do Vue 2 exige modificações em data, methods e computed para cada nova funcionalidade.
- Todas as APIs são importadas, e as não utilizadas são removidas durante o build, reduzindo o tamanho do pacote
- Manutenção facilitada
- Código mais reutilizável