Perguntas para Entrevistas Técnicas com UniApp e Vue 3

Tópicos de JavaScript

O que é cross-origin e como resolvê-lo?

Cross-origin ocorre quando o navegador aplica a política de mesma origem, bloqueando requisições entre protocolos, domínios ou portas diferentes. Soluções comuns incluem:

  • CORS (configuração de cabeçalhos no backend)
  • JSONP (suporta apenas GET)
  • Servidor proxy (como em ferramentas de build)
  • Mecanismos como postMessage.

Closures e escopo: o que são e onde são utilizados?

Uma closure é uma função que retém acesso a variáveis de seu escopo léxico, mesmo após a execução fora desse escopo. Exemplo prático: criar um contador privado.

// Exemplo de closure com contador privado
function gerarContador() {
  let valor = 0;
  return function() {
    valor++;
    return valor;
  };
}
const meuContador = gerarContador();
console.log(meuContador()); // 1

Qual a diferença entre debounce e throttle?

Debounce atrasa a execução de uma função até que um período de inatividade ocorrra, útil em campos de busca. Throttle limita a execução a intervalos fixos, ideal para eventos de scroll.

Tópicos de Vue 3

Principais melhorias no Vue 3 em comparação ao Vue 2

O Vue 3 apresenta otimizações de desempenho via Proxy, suporte aprimorado a TypeScript, API de composição para reutilização de lógica, e um sistema reativo baseado em Proxy mais eficiente.

Criação de nós virtuais com a função h

A função h gera nós virtuais, aceitando parâmetros como tag, props e filhos. Exemplo:

import { h } from 'vue';

const elemento = h('section', { class: 'modulo' }, [
  h('h2', 'Título Exemplo'),
  h('p', 'Conteúdo dinâmico')
]);

Formas de comunicação entre componentes no Vue 3

Incluem props, emissão de eventos, provide/inject, gerenciamento de estado com Pinia, e roteamento com Vue Router.

Ciclo de vida no Vue 3

Os hooks incluem onMounted, onUpdated, onUnmounted, entre outros, com suporte a Composition API.

Uso do keep-alive

O <keep-alive> cacheia componentes para evitar recriação, mantendo estado e melhorando performence.

Modificação de pacotes em node_modules

Em vez de alterar diretamente, utilize ferramentas como patch-package para criar patches aplicáveis.

Pinia vs Vuex

Pinia simplifica o gerenciamento de estado sem mutations, com suporte nativo a TypeScript e integração com Composition API, sendo recomendado para projetos modernos.

Otimizações de performance no Vue 3

Utilize shallowRef, v-memo, componentes assíncronos com defineAsyncComponent, e virtualização de listas longas.

Definição de props com TypeScript

Use declarações de tipo ou runtime props com PropType para tipagem estática.

Tópicos de UniApp

Ciclo de vida no UniApp

Inclui hooks de aplicação como onLaunch, página como onLoad, e componentes com hooks padrão do Vue.

Lazy loading de imagens

Implemente com o atributo lazy-load em tags de imagem.

Pull-to-refresh e infinite scroll

Utilize onPullDownRefresh para atualização e onReachBottom para carregar mais itens.

Fluxo de login com WeChat

Obtenha um código via uni.login, troque por tokens no backend, e use uni.getUserInfo para dados do usuário.

Comentários condicionais

Utilize diretivas como #ifdef para código específico de plataforma.

Subpackages em mini programs

Configure em pages.json e carregue dinamicamente com uni.requireSubPackage.

Outros Tópicos

Vite vs Webpack

Vite oferece inicialização rápida graças a ES modules nativos, enquanto Webpack requer bundling completo.

Arquitetura de micro frontends

Divide aplicações em subaplicações independentes, resolvendo problemas de escalabilidade e manutenção. Comunicação ocorre via props, eventos ou estado compartilhado.

Tags: uniapp vue3 javascript TypeScript pinia

Publicado em 7-3 07:10