Site de teste de alta frequência de entrevista de front-end da Web - perguntas da entrevista Vue

Para obter respostas detalhadas para as seguintes perguntas, consulte o link abaixo:

contente	Link de referência
Uso básico do Vue	O uso básico do Vue (um artigo para dominar os pontos de conhecimento mais básicos do Vue)
Comunicação Vue e recursos avançados	Comunicação entre componentes Vue e recursos avançados (comunicação entre vários componentes, modelo v personalizado, nextTick, slots)
Recursos avançados do Vue	Recursos avançados do Vue (componentes dinâmicos, carregamento assíncrono, keep-alive, mixin, Vuex, Vue-Router)
Princípio 1 do Vue	Princípio Vue (compreensão do modelo MVVM, alterações de dados detalhadas/monitoramento, alterações de array de monitoramento, compreensão aprofundada do DOM virtual)
Princípio Vue 2	Princípio Vue (algoritmo diff, compilação de templates, renderização e atualização de componentes, roteamento de implementação JS)

Diretório de artigos

1. A diferença entre v-show e v-if

controles v-show mostram e ocultam através da exibição CSS
v-if componentes realmente renderizam e destroem, não mostram e ocultam
Use v-show para alternar o estado de exibição com frequência, caso contrário, use v-if

2. Por que usar a chave em v-for

Deve usar chave e não pode ser índice e aleatório
No algoritmo diff, é julgado por tag e chave se é o mesmoNode
Reduza os tempos de renderização e melhore o desempenho de renderização

3. Descreva o ciclo de vida dos componentes Vue (componentes pai-filho)

Diagrama de ciclo de vida de componente único (do site oficial)
Relacionamento do ciclo de vida do componente pai-filho

insira a descrição da imagem aqui

4. Como os componentes Vue se comunicam (comum)

Adereços do componente pai-filho e this.$emit
evento personalizadoevent.$on event.$off event.$emit
vuex

5. Descreva o processo de renderização e atualização de componentes

Três módulos do princípio vue: responsivo, vdom e diff, compilação de templates

insira a descrição da imagem aqui

6. O princípio de realização do modelo v de vinculação de dados bidirecional

valor do elemento de entrada = this.name
Vincule o evento de entrada this.name = $event.target.value
a atualização de dados aciona novamente a renderização

7. Compreensão do MVVM

8. Características do computador

Em cache, os dados permanecem inalterados e não serão recalculados
Melhorar o desempenho

9. Por que os dados do componente devem ser uma função

Na verdade, o .vuearquivo é escrito como uma classe
Ao usar componentes em todos os lugares, é equivalente a instanciar
Executar dados ao instanciar, se os dados não forem uma função, os dados de cada instância do componente serão compartilhados

10. Em qual ciclo de vida a requisição ajax deve ser colocada?

montado (a renderização do componente está completa, o carregamento do DOM está completo)
JS é single-threaded e ajax busca dados de forma assíncrona
Não adianta colocar antes de montar, só vai deixar a lógica mais confusa

11. Como passar todos os adereços de um componente para componentes filhos

$props

<User v-bind = "$props">

12. Como implementar o v-model sozinho

Use :valuee não use v-model
A mudança e o nome do model.event podem corresponder

<template>
  <input
    type="text"
    :value="text"
    @input="$emit('change', $event.target.value)"
  />
</template>

<script>
export default {
    
    
  model: {
    
    
    prop: "text", //对应到 props text
    event: "change",
  },
  props: {
    
    
    text: String,
  },
};
</script>

13. Vários componentes têm a mesma lógica, como separá-los?

Link de referência

misturando
e algumas desvantagens de mixins

14. Quando usar componentes assíncronos?

carregar componentes grandes
As rotas são carregadas de forma assíncrona

15. Quando usar keep-alive

Componentes de cache, sem necessidade de renderizar novamente
Como alternar entre várias páginas de guia estáticas
Otimizar o desempenho

16. Quando usar antes de Destory

Vincular evento de evento personalizado.$off
limpar temporizador
Vincule eventos DOM personalizados, como rolagem de janela, etc.

17. O que é um slot com escopo definido?

O conteúdo do slot pode querer usar dados do domínio do pai e do domínio do filho

Componente pai:

Use a url do componente pai && o título do componente filho

<template>
  <div>
    <ScopedSlot :url="website.url">
      <template v-slot="slotProps">
        {
    
    {
    
     slotProps.slotData.title }}
      </template>
    </ScopedSlot>
  </div>
</template>

Submontagem:

<template>
  <a :href="url">
    <slot :slotData="website">
      {
    
    {
    
     website.subTitle }}
    </slot>
  </a>
</template>

18. Qual é a diferença entre ação e mutação no Vuex

Assíncrono pode ser tratado em ação, mas não em mutação
mutação fazer operações atômicas
ação pode integrar múltiplas mutações

19. Padrões de roteamento comuns do roteador Vue

modo hsah
Histórico H5 (requer suporte do servidor)
comparação dos dois

20. Como configurar o roteador Vue para carregar de forma assíncrona

component: () => import './xxx'

21. Descreva uma estrutura DOM com vnode

Estrutura DOM

<div id="div1" class="container">
    <p>vdom</p>
    <ul style="font-size: 20px">
        <li>a</li>
    </ul>
</div>

formulário vnode

{
    
    
  tag: 'div',
  props: {
    
    
    className: 'container',
    id: 'div1'
  }
  children: [
    {
    
    
      tag: 'p',
      children: 'vdom'
    },
    {
    
    
      tag: 'ul',
      props: {
    
    style: 'font-size: 20px'}
      children: [
        {
    
    
          tag: 'li',
          children: 'a'
        }
      ]
    }
  ]
}

22. Qual é a API principal para monitorar alterações de dados?

Object.defineProperty
E monitoramento profundo, matriz de monitoramento
Mas também há desvantagens

23. Como o Vue monitora as mudanças no array

Object.defineProperty não pode monitorar alterações de array
Redefina o protótipo, reescreva o push pop e outros métodos e implemente o monitoramento
O proxy pode oferecer suporte nativo a alterações de array de monitoramento

24. Descreva o princípio da capacidade de resposta

Monitore as alterações de dados
Processo de renderização e atualização de componentes

25. Complexidade de tempo do algoritmo diff

Sobre)
Fiz alguns ajustes em cima de O(n^3)

26. Descreva brevemente o processo do algoritmo diff

patch(elem, vnode) e patch(vnode, newVnode)
- patchVnode e addVnodes e removeVnodes
updateChildren (importância da chave)

27. Por que o Vue é renderizado assíncrono e para que serve $nextTick?

Renderização assíncrona (e incorporação de modificações de dados) para melhorar o desempenho de renderização
$nextTick dispara o retorno de chamada após a atualização do DOM

28. Métodos comuns de otimização de desempenho do Vue

Uso razoável de v-show e v-if
Uso razoável de computadores
Adicione a chave quando v-for e evite usá-la com v-if
Destruição oportuna de eventos personalizados e eventos DOM
Use componentes assíncronos com sabedoria
Uso razoável de keep-alive
O nível de dados não deve ser muito profundo
Use o vue-loader para fazer a compilação do template (pré-compilação) no ambiente de desenvolvimento
Otimização no nível do webpack
Otimização geral de desempenho de front-end, como carregamento lento de imagem

不积跬步无以至千里，不积小流无以成江海

Clique para seguir e não se perca, continue atualizando...