perguntas da entrevista js
1. tipo de dados js
Tipos de dados básicos Número, String, Booleano, Nulo, Indefinido, Símbolo, bigInt Tipos de dados de referência objeto, Array, Data, Função, RegExp2. Melhoria das declarações de variáveis e funções js
Em js, a declaração de variáveis e funções será promovida para o topo. A função de execução é promovida acima da variável. Se uma variável externa com o mesmo nome for declarada com var dentro da função, a função não pesquisará mais para cima. Funções anônimas não são içadas.3. Encerramento
Um encerramento é uma função que pode ler as variáveis internas de outras funções. Um encerramento é basicamente uma função que retorna uma função. Vantagens: Pode ler as variáveis dentro da função e mantê-las na memória. métodos privados do objeto. Desvantagens: É mais caro. O uso inadequado de memória pode causar problemas de estouro de memória.4. A diferença entre == e ===
== é igual em sentido não estrito. Se os valores forem iguais, eles serão iguais. O valor e a referência serão comparados. endereço será igual somente se forem iguais.5. isso
this sempre aponta para o chamador direto da função. Se houver uma nova palavra-chave, this aponta para o objeto que sai de new. No caso, this aponta para o objeto que acionou o evento.6. Como percorrer arrays e objetos js
para infoforEachfor-of7. A diferença entre mapa e forEach
O método forEach é o método mais básico, que é transversal e loop. Existem três parâmetros passados por padrão: o item de conteúdo da matriz percorrida, o índice do índice da matriz e o método Arraymap da matriz percorrida atual. , mas diferente. Ele retornará um novo array, portanto o retorno de chamada precisa ter um valor de retorno. Caso contrário, será retornado indefinido.8. Qual é a diferença entre funções de seta e funções comuns?
O objeto this no corpo da função é o objeto no qual está definido, não o objeto no qual é usado. Ele não pode ser usado como construtor. Ou seja, o novo comando não pode ser usado, caso contrário, ocorrerá um erro. lançado. O objeto de argumentos não pode ser usado. Se quiser usá-lo, você pode usar o parâmetro Rest. O comando yield não pode ser usado, portanto a função de seta não pode ser usada como uma função Geradora.9. Estratégia de mesma origem
Homologia refere-se ao mesmo nome de domínio, protocolo e número de porta.10. Como resolver problemas entre domínios
jsonp cross-domain document.domain + iframe cross-domain nodejs middleware proxy cross-domain backend define o nome de domínio seguro nas informações do cabeçalho11. Restrições do modo estrito
As variáveis devem ser declaradas antes de usar a função. Os parâmetros não podem ter atributos com o mesmo nome, caso contrário um erro será relatado. A instrução with não pode ser usada para evitar que aponte para o objeto global.12. Novo no es6
Nova função de seta de string de modelo para-of (usada para percorrer dados - como valores em uma matriz). ES6 incorpora objetos Promise na especificação e fornece objetos Promise nativos. Adicionados comandos let e const para declarar variáveis. Há também a introdução do conceito de módulo módulo13. Qual é a diferença entre atributo e propriedade?
atributo é o atributo que o elemento dom possui como uma tag html no documento. propriedade é o atributo que o elemento dom possui como um objeto em js. Para os atributos padrão do HTML, o atributo e a propriedade são sincronizados e serão atualizados automaticamente. Porém, para atributos customizados, eles não são sincronizados.14. Qual é a diferença entre let e const?
Não há promoção de variável no comando let. Se usado antes de let, um erro será relatado. Se houver comandos let e const na área do bloco, um escopo fechado será formado e declarações repetidas Const não serão permitidas. e não pode ser modificado. No entanto, se a definição for Objeto, você poderá modificar os dados dentro do objeto.15. Vazamento de memória
Definição: Vários problemas causados pelo programa não liberar ou não conseguir liberar a memória heap que foi alocada dinamicamente no programa por algum motivo. Possíveis vazamentos de memória em js: Resultado: lentidão, travamento, grande atraso, etc. Possíveis causas de vazamentos de memória em js Quando a variável global dom é limpa, ainda há um vazamento de memória causado pela existência de elementos filhos que não são limpos por o temporizador de referência.16. Como apresentar o roteiro?
html static <script> introduz inserção dinâmica js <script><script defer>: carregamento assíncrono, executado após a análise do elemento ser concluída <script async>: carregamento assíncrono, mas a renderização do elemento será bloqueada durante a execução17. Método de matriz
map: Percorra o array e retorne um novo array composto por valores de retorno de retorno forEach: Incapaz de quebrar, você pode usar throw new Error em try/catch para parar o filtro: Filtre alguns: Se um item retornar verdadeiro, o todo é verdadeiro: Se um item retornar falso, então O valor geral é falsejoin: gere uma string especificando o conector push/pop: push e pop no final, altere a matriz original, retorne o item push/pop unshift/shift: push e pop em o cabeçalho, altere o array original, retorne o item de operação sort (fn) / reverse: Classifique e reverta, altere o array original concat: Conecte o array, sem afetar o array original, cópia superficial slice(start, end): Retorna o novo array truncado, sem alterar o array original splice(start,number, value...): Retorna um array composto por elementos deletados, value é o item inserido, altera o array original indexOf / lastIndexOf(value, fromIndex): encontra o item da matriz e retorna o subscrito correspondente reduzir / reduzirRight(fn(prev, cur), defaultPrev) : Executado em pares, prev é o valor de retorno da última função simplificada, cur é o valor atual (a partir do segundo item)18. Cópia profunda e superficial de JavaScript?
Cópia superficial Object.assign cópia profunda pode ser resolvida por JSON.parse(JSON.stringify(object))19. Fale sobre a implementação de programação assíncrona?
Vantagens da função de retorno de chamada: simples e fácil de entender Desvantagens: não propício à manutenção, alto acoplamento de código Monitoramento de eventos Vantagens: fácil de entender, pode vincular vários eventos, cada evento pode especificar várias funções de retorno de chamada Desvantagens: orientado a eventos, o processo não é claro o suficiente para lançamento/assinatura (modo observador) é semelhante à escuta de eventos, mas você pode usar o 'Centro de Mensagens' para saber quantos editores e assinantes existem agora. Vantagens do objeto Promise: você pode usar o método then para escrever em um. cadeia; você pode escrever retornos de chamada quando ocorrerem erros Desvantagens da função: relativamente difícil de escrever e entender Vantagens da função geradora: troca de dados dentro e fora do corpo da função, mecanismo de tratamento de erros Desvantagens: gerenciamento de processos inconveniente vantagens da função assíncrona: executor integrado, melhor semântica , aplicabilidade mais ampla, retorno O que é promessa, estrutura clara Desvantagens: mecanismo de tratamento de erros20. Fale sobre ideias de programação orientada a objetos?
A ideia básica é usar conceitos básicos como objetos, classes, herança e encapsulamento para projetar programas. As vantagens são fácil de manter e expandir, alta reutilização e herança do trabalho de desenvolvimento e redução da carga de trabalho de duplicação. Ciclo de desenvolvimento reduzido21. Otimização do desempenho do projeto
Reduza o número de solicitações HTTP. Reduza as consultas DNS. Use JavaScript, CSS, fontes e imagens externas. etc. Otimize CSS Sprite. Use iconfont para distribuição em vários domínios Divida o conteúdo em diferentes nomes de domínio tanto quanto possível. Reduza o uso de iframes, evite src de imagem vazio, coloque a folha de estilo no link e coloque JavaScript na parte inferior. da página.22. O que é thread único e sua relação com assíncrono?
Thread único: Existe apenas um thread que pode fazer apenas uma coisa. Motivo: Para evitar conflitos na renderização do DOM, o navegador precisa renderizar o DOMJS. A estrutura do DOM pode ser modificada. duas partes de JS e não podem ser executadas ao mesmo tempo (ambas são modificadas por conflitos de DOM). O webworker suporta multithreading, mas não pode acessar a solução DOM: assíncrona.23. Fala sobre balanceamento de carga?
Servidores únicos trabalham juntos para evitar o excesso de trabalho de um ou alguns deles e maximizar a função do balanceamento de carga de redirecionamento http do servidor: o agendador seleciona o servidor de acordo com a política para responder à solicitação com 302. A desvantagem é que ele. só tem efeito na primeira vez e nas operações subsequentes Manter o balanceamento de carga de DNS neste servidor: Ao resolver nomes de domínio, acesse um dos vários servidores IP (monitoramento fraco) Motivo - evite conflitos de renderização de DOM Balanceamento de carga de proxy reverso: acesse um servidor unificado, e o servidor agenda o acesso Um servidor real requer um servidor unificado e seu desempenho é afetado pelo número de grupos de servidores.24. Cadeia de escopo?
A cadeia de escopo pode ser entendida como um conjunto de listas de objetos, incluindo o pai e seus próprios objetos variáveis, para que possamos acessar as variáveis ou funções declaradas no pai através da cadeia de escopo25. O que são protótipos, cadeias de protótipos e herança?
Todas as funções possuem um atributo protótipo (protótipo). Todos os objetos possuem um atributo __proto__. Em Javascript, cada função possui um atributo protótipo que aponta para seu próprio protótipo, e o objeto criado por esta função também possui um atributo proto apontando para este. Protótipo, e o protótipo de uma função é um objeto, então esse objeto também terá um proto apontando para o seu próprio protótipo, e este irá se aprofundando camada por camada até o protótipo do objeto Object, formando assim uma cadeia de protótipos.26. Qual é o mecanismo de coleta de lixo JS? 1. Visão geral
O mecanismo de coleta de lixo do js serve para evitar vazamentos de memória (ainda existe um pedaço de memória que não é mais necessário). O mecanismo de coleta de lixo procura continuamente por essas variáveis que não são mais usadas e libera a memória para a qual aponta. Em JS, o ambiente de execução de JS é responsável por gerenciar a memória utilizada durante a execução do código.
2. O ciclo de vida das variáveis
Quando o ciclo de vida de uma variável termina, a memória para a qual ela aponta será liberada. JS possui dois tipos de variáveis, variáveis locais e variáveis globais. As variáveis locais têm efeito em sua função atual, a memória da variável será liberada até que o navegador seja fechado.
3. Existem dois métodos de coleta de lixo js: limpeza de marcas e contagem de referências.
Varredura de marca: a maioria dos navegadores usa esse tipo de coleta de lixo. Quando uma variável entra no ambiente de execução (declara a variável), o coletor de lixo marca a variável. Quando a variável sai do ambiente, ela é marcada novamente e depois excluída.
Contagem de referência: Este método geralmente causa vazamentos de memória, principalmente em navegadores de versões anteriores. Seu mecanismo consiste em rastrear o número de referências a um determinado valor. Quando uma variável é declarada e um tipo de referência é atribuído à variável, o número de referências é aumentado em 1. Quando a variável aponta para outra, o número de referências. é decrementado em 1. Quando for 0, o mecanismo de reciclagem é iniciado.
27. Aprimoramento progressivo e degradação elegante
O aprimoramento progressivo cria páginas para navegadores de versão inferior para garantir as funções mais básicas e, em seguida, melhora efeitos, interações e adiciona funções adicionais para navegadores de versão superior para obter uma melhor experiência do usuário. Downgrade gracioso: crie funcionalidades completas desde o início e, em seguida, torne-as compatíveis com navegadores de versões anterioresperguntas da entrevista vue
1. Vantagens do vue
Leve, rápido, fácil de aprender, baixo acoplamento, reutilizável e desenvolvimento independenteA documentação está completa e a documentação está em chinês
2. O componente pai Vue passa dados para componentes filhos
adereços3. Componentes filhos passam eventos para componentes pais
$ emitir4. Pontos comuns e diferenças entre as instruções v-show e v-if
Pontos semelhantes: ambos podem controlar a exibição e ocultação de elementos DOM.
A diferença: v-show altera apenas o atributo display, o elemento dom não desaparece e não há necessidade de renderizar novamente a página ao alternar.
v-if exclui diretamente o elemento dom da página. A troca novamente requer uma nova renderização da página.
5. Como fazer o CSS funcionar apenas no componente atual
escopo6. Qual é a função de <keep-alive></keep-alive>
Usado principalmente para armazenar em cache componentes que precisam ser alternados com frequência sem renderizar novamente a página.7. Como obter dom
Adicione ref='refname' ao elemento dom e, em seguida, obtenha o elemento dom através de this.$refs.refname
8. Cite várias instruções no Vue e seu uso
modelo v
v-ligado
v-html
texto v
v-uma vez
v-se
v-show
9. O que é vue-loader? Para que é usado?
Um carregador para arquivos vue que converte template/js/style em módulos js
Objetivo: js pode escrever estilos es6 e estilo
10. Por que usar chave
Adicione uma chave como identificador exclusivo para cada elemento DOM. O algoritmo diff pode identificar corretamente esse nó e tornar a renderização da página mais rápida.11. Eixos e instalação?
O plug-in axios é necessário ao usar ajax em um projeto vue
Método de download cnpm install axios --save
12. Uso do modelo v
O v-model é usado para vinculação bidirecional de formulários e pode modificar dados em tempo real.13. Diga-me o uso de cada pasta e arquivo no diretório src no projeto vue.cli.
componentes armazenam componentes
Entrada da página principal do app.vue
entrada do arquivo principal index.js
ass armazena arquivos de recursos estáticos
14. Descreva resumidamente os cenários de uso de computado e relógio, respectivamente.
Para usar uma frase do site oficial, tudo que precisa ser calculado deve usar propriedades calculadas. Quando vários dados afetam um dado, use propriedades calculadas e use o carrinho de compras da cena.
Se uma alteração de dados afetar vários dados, use watch e use a caixa de pesquisa de cena.
15. O v-on pode monitorar vários métodos?
Sim, por exemplo v-on="onclick,onbure"16. Uso de $nextTick
Após a modificação em data(), os dados modificados dos dados não podem ser obtidos na página. Ao usar $nextTick, quando os dados em data são modificados, a página pode ser renderizada em tempo real.17. Por que os dados no componente Vue precisam ser uma função?
Devido às características do JavaScript, no componente, os dados devem existir na forma de uma função e não podem ser um objeto.
Os dados do componente são escritos como uma função, e os dados são definidos na forma de valor de retorno da função, de forma que cada vez que o componente for reutilizado, um novo dado será retornado, o que equivale a cada instância do componente ter seu próprio espaço de dados privado e seus valores Responsável por manter os dados individualmente sem causar confusão. Se simplesmente escrito na forma de objeto, todas as instâncias do componente compartilham os mesmos dados; portanto, se uma for alterada, todas serão modificadas.
18. Compreensão do quadro progressivo
Defenda o mínimo
Diferentes níveis podem ser selecionados de acordo com diferentes necessidades
19. Como o Vue implementa a vinculação de dados bidirecional?
A ligação de dados bidirecional do Vue é implementada por meio de sequestro de dados, combinação e modo de publicação-assinatura. Ou seja, quando os dados mudam, a visão muda de acordo. .
Núcleo: Em relação à ligação de dados bidirecional vue, seu núcleo é o método Object.defineProperty()
20. Diferenças e desvantagens entre aplicativos de página única e aplicativos de várias páginas
Um aplicativo de página única (SPA), em termos leigos, refere-se a um aplicativo com apenas uma página principal. O navegador carrega todos os js, html e css desde o início. Todo o conteúdo da página está contido nesta página principal. Mas ao escrever, ele ainda é escrito separadamente e, ao proteger, o programa de roteamento é carregado dinamicamente, a página de uma única página salta e apenas os recursos locais são atualizados. Usado principalmente em PC.
Multipágina (MPA) significa que há várias páginas em um aplicativo e a página inteira é atualizada quando a página salta.
Vantagens de uma única página: a experiência do usuário é boa e rápida e as alterações de conteúdo não exigem o recarregamento da página inteira. Com base nisso, o spa coloca menos pressão no servidor, o front-end e o back-end são separados e o efeito da página será. mais legal.
Desvantagens da página única: não conduz ao SEO, a navegação não está disponível. Se você precisar navegar, precisará avançar e retroceder sozinho. Demora muito para carregar pela primeira vez; a complexidade da página aumenta muito.
21. Por que é necessário escrever chave no componente lista do projeto Vue e qual a sua função? A chave é o ID exclusivo fornecido para cada vnode. Você pode confiar na chave para obter o nó vnode correspondente no oldVnode com mais precisão e rapidez.
É mais preciso porque com a chave, não há reutilização no local. Na comparação da função sameNode a.key === b.key, a reutilização no local pode ser evitada. Portanto, será mais preciso. É mais rápido usar a exclusividade da chave para gerar um objeto de mapa para obter o nó correspondente, que é mais rápido que o método de travessia.22. Qual é a ordem de execução dos ganchos do ciclo de vida dos componentes pai e filho?
Carregar processo de renderizaçãopai beforeCreate -> pai criado -> pai beforeMount -> filho beforeCreate -> filho criado -> filho beforeMount -> filho montado -> pai montado
Processo de atualização de subcomponentesPai beforeUpdate -> Filho beforeUpdate -> Filho atualizado -> Pai atualizado
Processo de atualização do componente paipai antes de atualizar -> pai atualizado
processo de destruiçãopai beforeDestroy -> filho beforeDestroy -> filho destruído -> pai destruído
23. Conte-me sobre sua compreensão do nextTick? Ao modificar o valor dos dados e obter imediatamente o valor do elemento dom, você não pode obter o valor atualizado. Você precisa usar o retorno de chamada $nextTick para permitir que o valor dos dados modificados seja renderizado e atualizado para o elemento dom antes de obtê-lo com êxito. .
24. Por que os dados no componente vue precisam ser uma função? Devido às características do JavaScript, no componente, os dados devem existir na forma de uma função e não podem ser um objeto. Os dados do componente são escritos como uma função, e os dados são definidos na forma de valor de retorno da função, de forma que cada vez que o componente for reutilizado, um novo dado será retornado, o que equivale a cada instância do componente ter seu próprio espaço de dados privado. Eles são responsáveis apenas por manter seus próprios dados sem causar confusão. Se simplesmente escrito na forma de objeto, todas as instâncias do componente compartilham os mesmos dados, portanto, alterar uma delas alterará todas elas.
25. A diferença entre vue e jQuery jQuery usa o seletor ($) para selecionar objetos DOM e realizar operações como atribuição, aquisição de valor, vinculação de eventos, etc. selecione e opere objetos DOM, enquanto os dados e a interface andam juntos. Por exemplo, se você precisar obter o conteúdo da tag label: $("lable").val();, ainda depende do valor do elemento DOM. O Vue separa completamente os dados e a visualização por meio de objetos Vue. Para operar com dados, você não precisa mais fazer referência ao objeto DOM correspondente. Pode-se dizer que os dados e a Visualização são separados por meio do objeto Vue, o vm. Este é o lendário MVVM.
26. A diferença entre delete e Vue.delete na exclusão de um array apenas altera os elementos excluídos para vazios/indefinidos. Vue.delete exclui diretamente o array e altera o valor da chave do array.
27. Como resolver o carregamento lento da primeira tela do SPA instalando os plug-ins necessários para o carregamento lento dinâmico utilizando recursos CDN;
28. O projeto Vue empacota um arquivo js, um arquivo css ou vários arquivos? De acordo com a especificação de andaime vue-cli, um arquivo js e um arquivo CSS.
29. Métodos para acionar atualizações de visualização quando vue atualiza um array push();
30. Qual é o ciclo de vida do vue? O que isso faz? Cada instância Vue deve passar por uma série de processos de inicialização quando é criada - por exemplo, ela precisa configurar o monitoramento de dados, compilar modelos, montar a instância no DOM e atualizar o DOM quando os dados mudam, etc. Ao mesmo tempo, algumas funções chamadas ganchos de ciclo de vida também serão executadas durante esse processo, o que dá aos usuários a oportunidade de adicionar seu próprio código em diferentes estágios.
31. Quais ganchos serão acionados quando a página for carregada pela primeira vez? beforeCreate, criado, beforeMount, montado
32. O Vue geralmente obtém dados nos quais a função de período é criada antes da montagem do Mount
33. A diferença entre criado e montado: criado: chamado antes do modelo ser renderizado em html, ou seja, certos valores de atributos geralmente são inicializados e depois renderizados em uma visualização. montado: chamado depois que o modelo é renderizado em HTML, geralmente após a conclusão da página de inicialização, e então executa algumas operações necessárias no nó DOM do HTML.
34. A compreensão do ciclo de vida do Vue é dividida em 8 estágios: antes/depois da criação, antes/depois do carregamento, antes/depois da atualização e antes/depois da destruição. Antes/depois da criação: No estágio beforeCreated, o elemento de montagem $el e os dados do objeto de dados da instância vue são indefinidos e não foram inicializados. Na fase criada, os dados do objeto de dados da instância vue estão disponíveis, mas $el não. Antes/depois do carregamento: No estágio beforeMount, $el e os dados da instância vue são inicializados, mas o nó dom virtual anterior ainda está montado e data.message não foi substituído. Na fase montada, a instância vue é montada e data.message é renderizado com sucesso. Antes/depois da atualização: Quando os dados mudam, os métodos beforeUpdate e atualizado serão acionados. Antes/depois da destruição: Após a execução do método destroy, as alterações nos dados não acionarão mais a função periódica, indicando que a instância Vue liberou o monitoramento de eventos e a ligação ao DOM, mas a estrutura do DOM ainda existe.
35. O que é vuex? Gestão do Estado no quadro vue.
36. Quais são os atributos do vuex? Existem cinco tipos, Estado, Getter, Mutação, Ação, Estado do módulo: dados básicos (local de armazenamento da fonte de dados) getters: mutações de dados derivadas de dados básicos: métodos para enviar dados alterados, sincronização! ações: como um decorador, agrupando mutações para que possam ser assíncronas. módulos: Modular Vuex
37. balde da família vue vue-cli, vuex, vueRouter, Axios
38. Quais são os comandos npm comumente usados em projetos vue-cli?
npm install é o comando para baixar o pacote de recursos node_modules npm run dev é o comando npm para iniciar o ambiente de desenvolvimento vue-cli npm run build vue-cli é o comando npm para gerar os recursos de implantação do ambiente de produção. report é usado para visualizar os arquivos de recursos de implantação do ambiente de produção vue-cli size npm comando.39. Por favor, diga-me a finalidade de cada pasta e arquivo no projeto vue-cli.
A pasta build armazena algumas configurações iniciais do webpack. A pasta config salva algumas configurações de inicialização do projeto. node_modules é o módulo do qual o projeto depende carregado pelo npm. O diretório src é o diretório que queremos desenvolver: assets é usado para colocar componentes de imagem. .vue é o arquivo de entrada do projeto main.js do arquivo principal do projeto.40. Qual é a diferença entre v-if e v-show?
O que eles têm em comum: todos eles exibem elementos DOM dinamicamente. Diferenças: v-if adiciona ou exclui dinamicamente elementos DOM na árvore DOM v-show controla a exibição e ocultação definindo o atributo de estilo de exibição do elemento DOM v-. se os switches tiverem um processo de compilação parcial. /Desinstalar, destrua e reconstrua adequadamente os ouvintes de eventos internos e os subcomponentes durante o processo de comutação v-show é apenas um simples consumo de desempenho de comutação baseado em css v-if tem um custo de comutação mais alto v-show tem. um custo de renderização inicial mais alto O cenário v-if é adequado para condições operacionais que provavelmente não mudarão. v-show é adequado para trocas frequentes.41. Quais são as prioridades de v-for e v-if Quando v-for e v-if são usados ao mesmo tempo, eles têm prioridade para serem executados um após o outro. if, o que significa que v-for tem uma prioridade mais alta que v-if. O julgamento de v-if é chamado sempre em cada atribuição de loop, portanto, não é recomendado usar v-if e v-for ao mesmo tempo. na mesma etiqueta.
42. Modificadores comumente usados em modificadores de evento Vue?
.stop evita que os eventos continuem a se propagar.prevent evita o comportamento padrão das tags.capture usa o modo de captura de eventos, ou seja, os eventos acionados pelo próprio elemento são processados aqui primeiro e depois entregues aos elementos internos para processamento.self apenas quando event.target é o elemento atual A função do manipulador é acionada quando o próprio evento Once será acionado apenas uma vez.Modificadores para modelo v
.lazy usa este modificador para sincronizar novamente no evento de alteração, converte automaticamente o valor de entrada do usuário em um tipo numérico e filtra automaticamente os espaços finais inseridos pelo usuário.Modificador de evento de teclado
.enter.tab.delete (captura as teclas "delete" e "backspace").esc.space.up.down.left.rightmodificador de sistema
.ctrl.alt.shift.metaModificador de botão do mouse
.esquerda.direita.meio43. Como usar objetos de evento em eventos vue?
Obtenha o objeto de evento e passe $event como parâmetro do método. Observe que o símbolo $ é usado no evento <button @click="Event($event)">Objeto de evento</button>44. Quais são os métodos de transferência de valor dos componentes?
Passar de pai para filho: O componente filho recebe o valor do atributo xx passado pelo componente pai por meio de props['xx'] Passar de filho para pai: O componente filho passa por this.$emit('fnName',value) , e o componente pai recebe o evento fnName Outras maneiras de receber retornos de chamada: criando um barramento e passando valores usando Vuex45. Como um componente filho chama o componente pai no Vue?
Chame diretamente o método do componente pai por meio de this.$parent.event no componente filho. Use $emit() no componente filho para acionar um evento para o componente pai, e o componente pai pode ouvir esse evento. O componente pai passa o método para o componente filho e o método é chamado diretamente no componente filho.46. Como fazer o CSS funcionar apenas no componente atual? Adicione escopo na frente do estilo no componente
47. Como obter dom?ref="domName" Uso: this.$refs.domName
48. salto de roteamento vue
(1) Link do roteador de navegação declarativa
Sem parâmetros: // Nota: Se o link no roteador-link começar com '/', ele inicia na rota raiz. Se não começar com '/', ele inicia na rota atual. <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //Tanto o nome quanto o caminho são aceitáveis. com parâmetros:<router-link :to="{name:'home', params: {id:1}}"><router-link :to="{name:'home', query: {id:1} }"> < router-link :to="/home/:id"> //Objeto de transferência<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}} "></ roteador-link>(2) this.$router.push()
Sem parâmetros: this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})parâmetro de consulta 1. Configuração de roteamento: nome: 'home', caminho: '/home' 2. Salto: this.$router.push({name:'home',query: {id:'1'}})this.$ router.push ({path:'/home',query: {id:'1'}})3. Obtenha parâmetros parâmetros html: $route.query.idscript parâmetros: this.$route.query.idparams parâmetros 1. Configuração de roteamento: nome : 'home', caminho: '/home/:id' (ou caminho: '/home:id') 2. Salto: this.$router.push({name:'home', params: {id:'1 '}}) Nota: // Você só pode usar name para corresponder rotas e não pode usar path // params para passar parâmetros (semelhante a post) Caminho de configuração de roteamento: "/home/:id" ou path: "/home :id " caso contrário, o parâmetro de atualização desaparece 3. Obtenha o parâmetro parâmetro html: $route.params.id parâmetro de script: this.$route.params.id Passe o parâmetro diretamente pelo caminho 1. Configuração da rota: nome: 'home', caminho: '/home/:id' 2. Salte: this.$router.push({path:'/home/123'}) ou: this.$router.push('/home/123') 3. Obtenha parâmetros: A diferença entre this.$route.params.idparams e query é semelhante a get. Após o salto, o URL da página será mesclado com parâmetros, semelhantes a ?id=1. Os não importantes podem ser passados assim, senhas e similares ainda usam parâmetros, e o ID ainda estará lá quando a página for atualizada. Params é semelhante a post. Os parâmetros não serão emendados após o URL da página após o salto.(3) this.$router.replace()
O uso é o mesmo acima(4) isto.$router.go(n)
Saltar n páginas para frente ou para trás, n pode ser um número inteiro positivo ou negativoa diferença:
this.$router.push salta para o caminho de URL especificado e adiciona um registro na pilha de histórico. Clicar em voltar retornará à página anterior. this.$router.replace salta para o caminho de URL especificado, mas não haverá nenhum registro no. pilha de histórico. Registro, clique em Retornar para pular para a página anterior (ou seja, substituir diretamente a página atual) this.$router.go(n) Avança ou retrocede n páginas, n pode ser um número inteiro positivo ou um número inteiro negativo49. O princípio da ligação bidirecional do Vue.js. O Vue.js 2.0 usa sequestro de dados (modo Proxy) combinado com o modo editor-assinante (modo PubSub) para sequestrar os setters e getters de cada propriedade por meio de Object.defineProperty(). Publique mensagens para assinantes quando os dados forem alterados e acione retornos de chamada de escuta correspondentes.
Cada instância de componente possui uma instância de programa inspetor correspondente, que registra as propriedades como dependências durante a renderização do componente. Posteriormente, quando o setter da dependência for chamado, o inspetor será notificado para recalcular, fazendo com que seus componentes associados sejam atualizados.
Vue.js 3.0, abandonou Object.defineProperty e usou o Proxy nativo ES6 mais rápido (interceptador de objetos de acesso, também chamado de proxy)
50. A diferença entre computado e relógio
Atributo computado: depende de outros valores de atributo e o valor calculado é armazenado em cache.
Observe o ouvinte: é mais uma função de observação, sem armazenamento em cache, semelhante ao retorno de chamada de monitoramento de determinados dados.
Cenários de aplicação:
Quando precisamos executar cálculos numéricos e confiar em outros dados, deve ser usado, porque o recurso de cache do calculado pode ser usado para evitar recalcular toda vez que o valor é obtido. O relógio deve ser usado quando precisamos executar operações assíncronas ou caras quando os dados mudarem. resultado final. Essas são coisas que as propriedades calculadas não podem fazer. Se vários fatores afetarem uma exibição, use calculado;A diferença entre os métodos computados e
Computação: As propriedades computadas são armazenadas em cache com base em suas dependências e serão reavaliadas apenas quando suas dependências associadas mudarem.51. filtro
Use os filtros no VUE para filtrar (formato) dados. Cenários de uso de exibição.52. Axios é uma biblioteca HTTP fácil, concisa e eficiente.
53. O que é Sass? Como instalá -lo e usá -lo no Vue? O SASS é um idioma CSS pré -compilado.
Use o NPM para instalar carregadores (carregador SASS, carregador CSS, etc.). Configure o carregador SASS em webpack.config.js. 54. A página vue.js pisca o vue.js fornece uma diretiva V-Cloak, que permanece no elemento até que a instância associada termine de compilação. Quando usado com CSS, essa diretiva oculta tags não compiladas até que a instância seja compilada. O uso é o seguinte. [V-Cloak] {Display: None;55. Como resolver o problema da estrutura hierárquica de dados muito profunda. Você pode usar a vm. $ set define manualmente uma camada de dados: vm. $ set ("demonstração", ABCD)
56. Instruções comuns de vue
O vodel V é usado principalmente para elementos de formulário para implementar a ligação de dados bidirecional (o mesmo que o modelo ng no angular) Função de ligação dinâmica em V-BID: Altere oportuno os dados na página v-on: clique liga a função à etiqueta , que pode ser abreviado como @, por exemplo, para vincular uma função de clique, a função deve ser escrita nos métodos v-for-formato: v-for = "nome do campo em (de) array json" Array ou json (o mesmo que NG-REPEATE EM ANGULAR) O teor de exibição em V (o mesmo que NG-Show in Angular), conteúdo de ocultação em V-Hide (o mesmo que Ng-Hide in Angular) V-IF Show and Hide (exclusão e adição de elementos DOM são os mesmos Como ng-se no angular, o valor padrão é falso) v- else-se deve ser usado em conjunto com V-IF V-ELSE deve ser usado em conjunto com V-IF e não pode ser usado sozinho, caso contrário, um erro será Erro de compilação de modelo relatado V-TEXT PARSE TEXTO V-HTML PARSE HTML Tag V-Bind: Classe três Métodos de ligação Tipo de objeto '{Red: Isred}' Ternário Type'isred? "Red": "Blue" 'Type' [{{{ vermelho: "isred"}, {blue: "isBlue"}] 'v-once apenas renderiza uma vez ao entrar na página que não está mais renderizando o V-Cloak para impedir que os elementos vindam os elementos dentro da tag no lugar no lugar57. A diferença entre $ rota e $ roteador
O $ Route é um "objeto de informações de roteamento", incluindo caminho, parâmetros, hash, consulta, fullpath, correspondência, nome e outros parâmetros de informação de roteamento. $ roteador é o objeto "instância de roteamento", incluindo métodos de salto de roteamento, funções de gancho etc.58. Como entender o fluxo de dados único de Vue
Os dados são sempre passados do componente pai para o componente filho. Isso impedirá que o componente filho altere acidentalmente o estado do componente pai, fazendo com que o fluxo de dados do seu aplicativo seja difícil de entender. NOTA: O uso diretamente do modelo V para vincular os adereços passados do componente pai para o componente filho é uma maneira irregular de escrita, e o ambiente de desenvolvimento relatará um aviso. Se você realmente deseja alterar o valor de adereços do componente pai, pode definir uma variável nos dados, inicializá -lo com o valor do suporte e usar $ emiti para notificar o componente pai para modificá -lo.59. O que é DOM virtual? Quais são os prós e os contras? Porque manipular o DOM no navegador é caro. Operações frequentes no DOM causarão certos problemas de desempenho. Esta é a razão para a criação do Virtual DOM. O Virtual DOM da VUE2 se baseia na implementação do Snabbdom da Biblioteca de código aberto. A essência do DOM virtual é usar um objeto JS nativo para descrever um nó DOM, que é uma camada de abstração do DOM real.
Vantagens: 1. Limite inferior garantido: O DOM virtual da estrutura precisa se adaptar a quaisquer operações que possam ser geradas pela API da camada superior. ; mas comparado ao curso de operação DOM de DOM é muito melhor; portanto, o DOM virtual da estrutura pode pelo menos garantir que ele ainda pode fornecer um bom desempenho sem otimização manual, o que não apenas garante o limite inferior de desempenho. 2. Não há necessidade de operar manualmente o DOM: não precisamos operar manualmente o DOM. De uma maneira previsível, o que melhora muito a eficiência. 3. Plataforma cruzada: o Virtual DOM é essencialmente um objeto JavaScript, e o DOM está fortemente relacionado à plataforma. Desvantagens: 1. A incapacidade de realizar a otimização final: embora o DOM virtual + a otimização razoável seja suficiente para atender às necessidades de desempenho da maioria dos aplicativos, em alguns aplicativos com requisitos de desempenho extremamente alto, o Virtual DOM não pode executar a otimização final alvo. 2. Ao tornar uma grande quantidade de DOM pela primeira vez, será mais lenta que a inserção innerhtml devido a uma camada extra de cálculo DOM.60. Como resolver o problema da perda de dados quando a página Vuex é atualizada?
A persistência dos dados da Vuex é necessária. Recomenda-se usar o plug-in Vuex-Persist, que é um plug-in para o armazenamento persistente da Vuex. Você não precisa acessar manualmente o armazenamento, mas salve o estado diretamente em cookies ou localização.61. Por que a Vuex precisa ser dividida em módulos e adicionar namespaces?
Módulo: Devido ao uso de uma única árvore de estado, todos os estados da aplicação serão concentrados em um objeto relativamente grande. Quando um aplicativo se torna muito complexo, os objetos da loja podem ficar bastante inchados. Para resolver os problemas acima, a Vuex nos permite dividir a loja em módulos. Cada módulo tem seu próprio estado, mutação, ação, getter e até submódulos aninhados.
Namespace: por padrão, ações, mutações e getters dentro de um módulo são registrados no espaço de nome global - isso permite que vários módulos respondam à mesma mutação ou ação. Se você deseja que seu módulo tenha um maior grau de encapsulamento e reutilização, você pode torná -lo um módulo nomeado adicionando namespaced: true. Quando um módulo é registrado, todos os seus getters, ações e mutações serão automaticamente nomeados de acordo com o caminho registrado pelo módulo.
62. Quais padrões de design são usados no Vue?
1. Modo de fábrica - passe nos parâmetros para criar uma instância Virtual DOM e retornar o vNode da tag básica e do componente VNODE de acordo com diferentes parâmetros. 2. Modo Singleton-o programa inteiro possui uma e apenas uma instância. 3. Modelo de publicação de assinatura de publicação. (Vue Event Mechanism) 4. Padrão de observador. (Princípio de Dados Responsivos) 5. Modo Decorador (Uso do @Decorator) 6. Modo de estratégia.63. Que otimizações de desempenho você fez para o Vue? Aqui, listamos apenas a otimização de desempenho para o VUE.
Não torne a hierarquia de objetos muito profunda, caso contrário, o desempenho será ruim. Não coloque dados que não requerem capacidade de resposta nos dados (você pode usar o Object.Freeze () para congelar os dados) Uma chave ao atravessar, e a chave é o melhor valor de identificação, e evite usar o V -IF ao mesmo tempo Lista de big data e otimização do desempenho da tabela - Lista virtual/tabela virtual para evitar vazamentos internos, destruir variáveis globais e tempo após destruição de componentes, Imagem de roteamento de carregamento preguiçoso, carregamento preguiçoso roteamento assíncrono de terceiros sob demanda Uso apropriado dos componentes de cache de Keep-Alive para carregar, anti-Shaking and Throttling, renderização do servidor SSR ou pré-renderização64. Princípio do método Vue.Set: A modificação do VUE não acionará a atualização da visualização em dois casos.
1. Adicione novos atributos à instância após a criação da instância (adicione atributos ao objeto responsivo) 2. Altere diretamente o subscrito da matriz para modificar o valor da matriz. O princípio do Vue.Set ou $ set é o seguinte. Ao adicionar um atributo inexistente a um objeto, o novo atributo será rastreado primeiro e, em seguida, o observador coletado pelo dep do objeto OB será acionado para atualizar. a matriz em si para atualizar a matriz.65. Cenários de uso e princípios de componentes funcionais.
1. Componentes funcionais precisam especificar funcional: verdadeiro ao declarar o componente. Função e propriedades calculadas não podem ser usadas. Referenciado externamente através da REF, o referenciado real é HTMLELEMENT6. $ attrs e montado automaticamente.Vantagens: 1. Como os componentes da função não precisam ser instantados, são apátridas e não têm ciclo de vida, o desempenho da renderização é melhor que os componentes comuns.
Cenários de uso:
Um componente de exibição simples, usado como um componente de contêiner, como o roteador, é um componente funcional. "Componente de ordem superior" - usado para aceitar um componente como um parâmetro e retornar um componente embrulhado. O código relevante é o seguinte:
if (isttrue (ctor.options.functional)) {// aqueles com atributos funcionais são componentes funcionais retornam CreateFunctionalComponent (cTOR, propsdata, dados, contexto, filhos);} ouvintes const = data.on; ;66. Por que os componentes filhos não podem modificar o suporte passado pelo componente pai? Todos os adereços formam uma ligação unidirecional entre seus adereços para pais e filhos: as atualizações do suporte pai fluirão para baixo para o componente filho, mas não vice-versa. Isso impedirá que o componente filho altere acidentalmente o estado do componente pai, fazendo com que o fluxo de dados do seu aplicativo seja difícil de entender.
67. Criação do projeto Vue. Configuração de roteamento, configuração do ambiente, transferência de valor do componente, etc.
CSS, perguntas da entrevista em HTML
Qual é a diferença entre HTML e HTML5?
Existem três diferenças principais:
1. Declaração Declaração Diferença
HTML: linguagem de marcação de hipertexto, uma linguagem do tipo de texto simples.
HTML5.0: O documento afirma que o HTML5 é fácil de escrever, simplificado e propício para leitura e desenvolvimento rápidos por programadores.
2. Diferenças na semântica estrutural
html: tags que não refletem a semântica estrutural, como: <div id = "nav"> </div>
HTML5: Adicionado muitas tags semânticas, como: <Artigo>, <uperle>, <udio>, <bdi> ...
3. Diferenças no desenho
HTML: refere-se a gráficos vetoriais escaláveis, os gráficos baseados em vetores usados para definir a Web.
HTML5: O elemento Canvas do HTML5 usa scripts (geralmente usando JavaScript) para desenhar imagens na página da web e pode controlar todos os pixels da tela.
O que é um modelo de caixa?
Dividiremos uma caixa em várias partes: conteúdo, preenchimento, borda e margem.Como entender a semântica HTML5?
Cabeçalho de etiqueta semântica HTML - Título NAV - Artigo de navegação - seção do artigo - Seção ou parágrafo de lado - Footer da barra lateral - FooterQuais são os benefícios da semântica?
Na ausência de código CSS, a estrutura de conteúdo e a estrutura de código podem ser bem apresentadas (para que os não-técnicos possam entender o código) para melhorar a experiência do usuário. benéfico para o SEO. A semanticização pode estabelecer uma melhor conexão com os mecanismos de pesquisa. (Navegador) 1. Cookie (1) é usado para comunicação entre o cliente e o servidor (2), mas tem a função do armazenamento local, por isso é "emprestado" (3) document.cookie = ... apenas obtenha e modificá -lo (4) desvantagens dos cookies para armazenamento ① A capacidade de armazenamento é muito pequena, apenas 4KB ② Todas as solicitações HTTP são transportadas, o que afetará a eficiência da aquisição de recursos ③ A API é simples e precisa ser encapsulada para usar o documento. Cookie 2. LocalStorage, SessionStorage (1) Especialização HTML5 Projetada para armazenamento, a capacidade máxima é de 5m (2) A API é simples e fácil de usar (3) lcoalStorage.SetItem (Key, Value); LocalStorage.getItem (key); (4) No modo oculto do iOS Safari: LocalStorage.getItem relatará um erro, o uso unificado de sugestões do encapsulamento Try-capath 3. SessionStorage é usado para armazenar dados localmente em uma sessão. e os dados serão destruídos quando a sessão terminar. Portanto sessionStorage não é um armazenamento local persistente, apenas armazenamento em nível de sessão. LocalStorage é usado para armazenamento local persistente. Quais são os núcleos de navegador comuns? ** Kernel Trident: ** Significa que o navegador é o navegador do IE, então o kernel Trident também é chamado de kernel e.** Core de lagartixas: ** Representa o navegador é o Firefox Browser. O kernel Gecko é de código aberto e sua maior vantagem é que ele pode ser uma plataforma cruzada.
Webkit: WebKit Kernel: O navegador representativo é Safari (navegador da Apple) e uma versão inferior do Google Chrome, que é um projeto de código aberto.
** Presto Core: ** Representa o navegador do navegador (o chinês traduzido como "navegador aberto"). .
** CORE BLINK: ** Desenvolvido pelo Google e Opera, lançado em abril de 2013, o Crome Core atual é pisca.
Fale sobre sua compreensão dos padrões da Web e W3C?
Padrões da Web:
Os padrões da Web são divididos principalmente em três partes: estrutura, desempenho e comportamento.
Estrutura: refere -se às tags que geralmente escrevemos no corpo, que são compostos principalmente de tags html
Desempenho: refere -se a estilos de tags html mais ricos, compostos principalmente por estilos CSS
Comportamento: refere -se à interação entre a página e o usuário, composto principalmente por JS Part
W3C:
O W3C apresentou requisitos padronizados para padrões da Web, ou seja, especificações de código.
Requisitos estruturais
1. As letras da etiqueta devem ser minúsculas
2. O rótulo deve ser fechado
3. As tags não podem ser aninhadas arbitrariamente
Requisitos de desempenho e comportamento
1. Recomenda -se usar scripts CSS e JS externos para obter separação de estrutura e desempenho, estrutura e comportamento, o que pode melhorar a eficiência de renderização da página e exibir o conteúdo da Web mais rapidamente.
Como implementar o layout responsivo do navegador?
Use consultas de mídia (@media), use layout flexível, use unidades percentuais, use unidades REM e use unidades VH e HW.Entendendo seletores e prioridades do CSS?
Seletores CSS comumente usados
Seletor de identificação, seletor de classe, seletor de tags, seletor de atributos, seletor de pseudo-classe, seletor de descendente
Divisão de Peso
No mesmo nível:
! IMPORTANTE> Estilo embutido> Seletor de ID> Seletor de classe> (Seletor de tags, seletor de pseudo-classe, seletor de atributos)
Em diferentes níveis:
Normalmente, quanto maior o valor do peso, maior a prioridade, mas não houve uma divisão de valor de peso específica; portanto, na maioria dos desenvolvimentos atuais, quanto mais profundo o nível, maior a prioridade.
Fale sobre sua compreensão do refluxo e Redraw?
O que é reflexão?
O reflexão ocorre quando a largura, a altura, o layout, a exibição ou o esconderijo de um elemento em si ou a estrutura de texto dentro do elemento muda, fazendo com que a página precise ser reconstruída.O que é repintar?
A redefinição ocorre quando a largura, a altura, o layout, a exibição ou o esconderijo de um elemento em si não mudou, mas apenas o estilo de aparência do elemento mudou.
Quando o refluto acontecerá? Quando um elemento DOM visível é adicionado ou excluído, a posição do elemento muda, o tamanho do elemento muda, o conteúdo muda e quando a página é renderizada pela primeira vez.
Quando a repintura acontecerá?
Liste alguns estilos CSS relacionados: cor, fundo, tamanho de fundo, visibilidade, shadow de caixa
Qual é a diferença entre opacidade: 0, visibilidade: oculta e exibição: nenhuma?
Opacity = 0, o elemento está oculto, mas o layout da página não será alterado.
Visibilidade = oculta, o elemento está oculto, mas o layout da página não será alterado, mas os eventos ligados ao elemento não serão acionados.
Display = Nenhum oculta o elemento e altera o layout da página.
Pré -processador CSS
LessSassQual é a diferença entre o título e o alt de <mg>?
Geralmente, quando o mouse desliza sobre um elemento, o ALT é exibido. Pode melhorar a acessibilidade das imagens.O que são elementos embutidos e elementos no nível do bloco? A que elemento o img pertence?
Endereço - Endereço BlockQuote - Centro de referência de bloco - Dir do bloco de alinhamento central DIV - Lista de diretórios Div - Nível de bloco comumente usado, também o rótulo principal do Layout CSS DL - Lista de Definição Fieldset - Formulário de Controle do Formulário - Formulário Interativo H1 - Manchete H2 - Subtítulo H3 - Nível 3 Cabeça H4 - Nível 4 Cabeça H5 - Nível 5 Cabeça H6 - Nível 6 Cabeça HR - Linha de separador horizontal ISIndex - Menu prompt de entrada - Lista de menus Noframes - Conteúdo opcional de enquadrões (Exiba isso para navegadores que não suportam quadros) Bloco Bloco) Content noscript - conteúdo opcional de script (este conteúdo é exibido para navegadores que não suportam script) OL - Formulário ordenado P - Parágrafo pré - Tabela de texto formatada - Tabela UL - Lista não ordenada
A - Anchor Point ABBR - ABREVIATION ACRIMILY - PRIMEIRA LATRA B - BOLD (NÃO RECOMENDADO) BDO - BIDI Substituir grande - fonte grande Br - Citação de quebra de linha - Código de referência - Código do computador (necessário ao citar o código -fonte) DFN - Definir campo Em - Ênfase na fonte - configuração de fontes (não recomendado) i - IMG em itálico - entrada de imagem - caixa de entrada KBD - defina rótulo de texto do teclado - rótulo da tabela q - citações curtas s - sublinhado (não recomendado) SAMP - defina amostra de código de computador Selecionar - seleção de itens seleção de itens Pequeno-pequeno tempo de texto para fontes-comumente usados contêineres embutidos, definindo blocos dentro da greve de texto-sublinhe forte-ênfase ousada sub-subscript sup-superescript textarea-caixa de entrada de texto multi-line tt-textipo u-sublinhado
IMG é um elemento de substituição em linha e tem o mesmo efeito que um elemento de bloco
A diferença entre readonly e deficientes em formulários
Pontos comuns: impede que os usuários alterem o conteúdo no formulário. Não pode ser modificado. A caixa de texto definida como desativada não pode obter foco 3. Se o campo do formulário estiver desativado, o campo não será enviado (valor passado no formulário) e serializado1. Digite o URL no navegador e exiba -o na página da web.
A resolução do nome de domínio inicia um handshake de três vias para estabelecer uma conexão TCP. Solicita os recursos no código HTML.
2. Desvantagens dos cookies
Há um limite para o número máximo de cookies gerados em cada nome de domínio específico. , geralmente não excede 4095 bytes.
3. Navegadores e kernels convencionais
Google Chrome: Webkit/Blink Safari: Webkit IE: Trident Firefox: Gecko Opera: Presto/Webkit/Blink
4. A diferença entre SessionStorage e LocalStorage
O SessionStorage é usado para armazenar dados localmente em uma sessão. localStorage é usado para armazenamento local persistente A menos que os dados sejam excluídos ativamente, eles nunca expirarão.
5. Fale sobre o entendimento das especificações do BFC
O BFC é o contexto de formatação de bloqueio, ou seja, o contexto de formatação. Os efeitos do BFC são para permitir que os elementos dentro e fora do BFC interajam entre si.
6. Nomeie pelo menos três maneiras de reduzir o tempo de carregamento da página.
Minimize as solicitações HTTP repetidas na página.
7. Como otimizar o desempenho do site?
Para conteúdo, reduza as solicitações HTTP: Mesclar arquivos, sprites CSS e imagens embutidas. Use GZIP para componentes. Na parte inferior da página Estabelecer imagens em HTML.8. Armazenamento do navegador?
Quando é transitório, precisamos armazenar apenas os dados na memória e o armazenamento persistente está disponível apenas em tempo de execução. etc., no HTTP carregado automaticamente, o limite superior do tamanho é 4K, você pode definir o tempo de expiração por si mesmo LocalStorage / SessionStorage: Fechamento e exclusão de armazenamento / janela de longo prazo, o limite de tamanho é de 4 ~ 5mindexdb servidor distribuído Redis banco de dados9. Get/Post?
GET: cache, o comprimento da solicitação é limitado, será salvo na história, nenhum efeito colateral (recursos não são modificados), idempotente (o número de solicitações não tem nada a ver com recursos) Cenário: Segurança, big data, mais tipos de codificação10. Questões de segurança?
Ataque XSS: Injete cookies de código malicioso definido httponly para escapar do conteúdo de entrada e saída de conteúdo na página CSRF: falsificação de solicitação de sites cruzados, proteção: get não modifica os dados e não é acessado por sites de terceiros define o cookie do usuário para uma lista de permissões e não é acessada pela verificação da solicitação de solicitação do site de terceirosOtimização de desempenho
1. Quais são os aspectos da otimização do desempenho?
Compactação de recursos e fusão, redução de solicitações HTTP, carregamento assíncrono de código não essencial, utilizando cache do navegador e usando CDN para pré-resolver DNS2. Carregamento assíncrono?
Dinâmico de acarreto de scriptsesync3. Quais são as diferenças nos métodos de carregamento?
O adiamento é executado após a análise do HTML.4. Pré -carga?
Durante o desenvolvimento, você pode encontrar essa situação. Alguns recursos não precisam ser usados imediatamente, mas você deseja obtê -los o mais rápido possível. A pré -carregamento é na verdade uma busca declarativa, que força o navegador a solicitar recursos e não bloqueia o evento Onload. A pré -carga pode reduzir o tempo de carregamento da primeira tela até certo ponto, porque alguns arquivos importantes que não afetam a primeira tela podem ser atrasados no carregamento.5. DNS pré-resolução?
A resolução do DNS também leva tempo e o IP correspondente ao nome do domínio pode ser obtido com antecedência até a pré-resolução. <meta http-equiv = 'x-dns-prefetch-control' content = 'em'> <link rel = "dns -prefetch" href = "// yuchengkai.cn"> a tag A não será ativada por default em inadimple O protocolo HTTPS pré-parecido, então a meta precisa ser definida manualmente6. Execução preguiçosa? Essa tecnologia pode ser usada para otimização de primeira tela. A execução preguiçosa requer acordar, o que geralmente pode ser feito chamando um cronômetro ou evento.
7. Carregamento preguiçoso?
O princípio do carregamento preguiçoso é carregar apenas o que precisa ser carregado em uma área personalizada (geralmente na área visível, mas também pode ser a área que está prestes a entrar na área visível). Para imagens, primeiro defina o atributo SRC da tag de imagem em uma imagem de espaço reservado, coloque o recurso de imagem real em um atributo personalizado e, ao entrar na área personalizada, substitua o atributo personalizado pelo atributo src, para que a imagem faça o download do recurso , percebendo o carregamento preguiçoso da imagem.
O carregamento preguiçoso pode ser usado não apenas para imagens, mas também para outros recursos. Por exemplo, o vídeo só começará a jogar depois de entrar na área visível, etc.
reaja perguntas da entrevista
1. Quando usar o gerente do estado?
Olhando para o projeto como um todo, o uso do usuário é complexo. De várias fontes. Componente.2. Quais são as características do React?
Ele usa ** DOM virtual ** em vez de DOM real. Pode ser renderizado usando o lado do servidor. Segue-se fluxo de dados unidirecional ou ligação de dados3. Liste algumas das principais vantagens do React?
Ele melhora o desempenho do aplicativo e pode ser facilmente usado no lado do cliente e do servidor. Reagir.4. O que é JSX?
O JSX é abreviado para JavaScript XML. é um arquivo usado pelo React que aproveita a sintaxe do modelo de potência expressiva e HTML do JavaScript. Isso facilita a compreensão dos arquivos HTML.此文件能使应用非常可靠，并能够提高其性能例子render() {return(<div><h1> Hello World </h1></div>)}5、说说为什么浏览器无法读取JSX?
浏览器只能处理JavaScript 对象，而不能读取常规JavaScript 对象中的JSX。所以为了使浏览器能够读取JSX，首先，需要用像Babel 这样的JSX 转换器将JSX 文件转换为JavaScript 对象，然后再将其传给浏览器6、你理解“在React 中，一切都是组件”这句话?
组件是React 应用UI 的构建块。这些组件将整个UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响UI 的其余部分7、 React 中render()的目的?
每个React 组件强制要求必须有一个render()。它返回一个React 元素，是原生DOM 组件的表示。如果需要渲染多个HTML 元素，则必须将它们组合在一个封闭标记内，例如<form>、<group>、<div> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果8、什么是Props?
Props 是React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据9、React 中的状态是什么？
状态是React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与Props 不同，它们是可变的，并创建动态和交互式组件。可以通过this.state() 访问它们。10、区分状态和Props?
条件StateProps从父组件中接受初始值YesYes父组件可以改变值NoYes在组件中设置默认值NoYes在组件的内部变化YesNo设置子组件的初始值YesYes在子组件的内部改变NoYes11、如何更新组件的状态?
使用this.setState()更新组件的状态12、React 组件生命周期的阶段是什么?
React 组件的生命周期有三个不同的阶段：初始渲染阶段：这是组件即将开始其生命之旅并进入DOM 的阶段。更新阶段：一旦组件被添加到DOM，它只有在prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从DOM 中删除13、你对React 的refs 有什么了解?
Refs 是React 中引用的简写。它是一个有助于存储对特定的React 元素或组件的引用的属性，它将由组件渲染配置函数返回。用于对render()返回的特定元素或组件的引用。当需要进行DOM 测量或向组件添加方法时，它们会派上用场列出一些应该使用refs 的情况?需要管理焦点、选择文本或媒体播放时触发式动画与第三方DOM 库集成14、如何模块化React 中的代码?
可以使用export 和import 属性来模块化代码。它们有助于在不同的文件中单独编写组件15、什么是高阶组件HOC?
高阶组件是重用组件逻辑的高级方法，是一种源于React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为HOC 是“纯（Pure）”组件16、你能用HOC 做什么?
HOC 可用于许多任务:用代码重用，逻辑和引导抽象渲染劫持状态抽象和控制Props 控制17、 React 中key 的重要性是什么?
key 用于识别唯一的Virtual DOM 元素及其驱动UI 的相应数据。它们通过回收DOM 中当前所有的元素来帮助React 优化渲染。这些key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能18、MVC 框架的主要问题是什么?
key 用对DOM 操作的代价非常高程序运行缓慢且效率低下内存浪费严重由于循环依赖性，组件模型需要围绕models 和views 进行创建19、请你解释一下Flux?
20、你对“单一事实来源”有什么理解
Redux 使用“store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在store 中，并且它们从store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。21、列出Redux 的组件?
Redux 由以下组件组成:Action 这是一个用来描述发生了什么事情的对象Reducer 这是一个确定状态将如何变化的地方Store 整个程序的状态/对象树保存在Store 中View 查只显示Store 提供的数据22、 Store 在Redux 中的意义是什么?
store 是一个JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过Reducer 返回一个新状态23、 Redux 有哪些优点?
结果的可预测性可维护性服务器端渲染易于测试-24、 什么是React 路由?
React 路由是一个构建在React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页Web 应用。 React 路由有一个简单的API。25、说说你对React 的渲染原理的理解?
单向数据流。React 是一个MVVM 框架，简单来说是在MVC 的模式下在前端部分拆分出数据层和视图层。单向数据流指的是只能由数据层的变化去影响视图层的变化，而不能反过来（除非双向绑定）数据驱动视图。我们无需关注页面的DOM，只需要关注数据即可渲染过程，生命周期……setState()大部分时候是异步执行的，提升性能。26、React 中三种构建组件的方式?
React.createClass()、ES6 class 和无状态函数。JQuery
说出jQuery中常见的几种函数以及他们的含义是什么? （1）get()取得所有匹配的DOM元素集合； （2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素； （3）append(content)向每个匹配的元素内部追加内容； （4）after(content)在每个匹配的元素之后插入内容； （5）html()/html(var)取得或设置匹配元素的html内容； （6）find(expr)搜索所有与指定表达式匹配的元素； （7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数； （8）empty()删除匹配的元素集合中所有的子节点； （9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法； （10）attr(name)取得第一个匹配元素的属性值。
jQuery 能做什么？ Get the elements of the page; modify the appearance of the page; change the large content of the page; respond to the user's page operations; add dynamic effects to the page; get information from the server without refreshing the page; simplify common javascript tasks .
如何将一个HTML元素添加到DOM树中的？ 可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。
什么是jQuery? jQuer能做什么？ jQuery是一套JavaScript的库，它简化了使用Javascript进行网页特效开发的一些复杂性，提供了对常见任务的自动化和复杂任务的简化
jQuery的作用快速获取文档元素提供漂亮的页面动态效果创建Ajax无刷新网页提供对JavaScript语言的增强增强的事件处理更改网页内容JQuery可以修改网页中的内容,比如更改网页的文本、插入或转网页图像, jQuery简化了原本使用JavaScript代码需要处理的方式。JQuery 的优点1.利用css的选择器提供高速的元素查找行为。 2.提供了一个抽象层来标准化各种常见的任务，可以解决各种浏览器的兼容问题。 3.将复杂的代码简化，提供连缀编程模式，大大简化了代码的操作。
以上就是分享一些值得收藏的精选Web前端面试题（附答案）的详细内容，更多请关注本站其它相关文章！