Vue perguntas de entrevista de alta frequência (com respostas)

1. O papel do valor-chave no Vue

1. Quando o vue está renderizando, ele irá primeiro comparar o novo DOM com o antigo DOM. Se a estrutura do dom for consistente, o vue irá reutilizar o antigo dom. (Neste momento, a renderização de dados pode ser anormal)
2. Use a chave para adicionar um identificador exclusivo ao dom, deixe o vue force atualizar o dom

2. Valor de passagem do componente Vue

pai para filho

1. As props do subcomponente definem as variáveis
2. Quando o componente pai usar o componente filho, passe o valor para a variável props por meio do atributo inline
Características: Fluxo de dados unidirecional

pai da criança

1. Subcomponente: $emit aciona o evento do pai
2. O pai está usando o componente para usar o nome do evento @custom = método do pai (o filho traz o valor)
Características: monitoramento de eventos

componente não pai-filho

vuex EventBus (apenas entenda)

3. [Obrigatório] Em quantos estágios o ciclo de vida do vue é dividido?

Núcleo: 8 funções de gancho em quatro estágios

O processo de uma instância Vue desde a criação até a destruição é o ciclo de vida. Ou seja, uma série de processos desde o início da criação, inicialização dos dados, compilação dos templates , montagem do Dom→renderização, atualização→renderização, descarga, etc. Chamamos isso de ciclo de vida do Vue.

1* *）antesCriar**

Chamado após a inicialização da instância, antes da configuração do observador de dados e do evento/observador.

2* *）criado**

Chamado imediatamente após a criação da instância. Nesta etapa, a instância concluiu as seguintes configurações: observador de dados, operação de atributos e métodos e retorno de chamada de evento de observação/evento. No entanto, a fase de montagem ainda não foi iniciada e a propriedade $el não está visível no momento.

3* *）antes da montagem**

Chamado antes do início da montagem: a função de renderização associada é chamada pela primeira vez.

4* *）montado**

Esse gancho é chamado depois que el é substituído pelo recém-criado vm.$el e montado na instância. Se a instância raiz montar um elemento no documento, vm.$el também estará no documento quando a montagem for chamada.

5* *）antes de atualizar**

Chamado quando os dados são atualizados, antes que o DOM virtual seja corrigido. Isso é adequado para acessar o DOM existente antes da atualização, como remover manualmente o ouvinte de evento adicionado . Este gancho não é chamado durante a renderização do lado do servidor, porque apenas a renderização inicial será feita no lado do servidor.

6* *）atualizado**

Esse gancho é chamado após a renderização e correção do DOM virtual devido a alterações de dados.

7* *）ativado**

Chamado quando o componente keep-alive está ativo. Esse gancho não é chamado durante a renderização do lado do servidor.

8* *）desativado **

Chamado quando o componente keep-alive está desabilitado. Esse gancho não é chamado durante a renderização do lado do servidor.

9* *）antesDestruir**

Chamado antes que a instância seja destruída. Nesta etapa, a instância ainda está totalmente disponível. Esse gancho não é chamado durante a renderização do lado do servidor.

10* *）destruído**

Chamado após a instância do Vue ser destruída. Após a chamada, tudo apontado pela instância Vue será desvinculado, todos os ouvintes de eventos serão removidos e todas as instâncias filhas serão destruídas. Esse gancho não é chamado durante a renderização do lado do servidor.

11* *) errorCaptured (novo em 2.5.0+)**

Chamado ao detectar um erro de um componente descendente. Este gancho recebe três parâmetros: o objeto de erro, a instância do componente onde ocorreu o erro e uma string contendo informações sobre a origem do erro. Esse gancho pode retornar falso para evitar que o erro se propague ainda mais para cima.

4. [Obrigatório] Quais funções de gancho serão acionadas quando a página for carregada pela primeira vez ?

quatro ganchos
- antesCriar,
- criada,
- antes do Monte,
- montei essas funções de gancho

5. [Obrigatório] Modo de implementação de roteamento do Vue: modo hash e modo histórico

1. Há # no hash de caminhos diferentes
, mas não há # no histórico
2.
Hash de modos de trabalho diferentes: modifique o hash da página atual, nenhuma
configuração adicional do servidor é necessária

1. Modo hash: No navegador, o símbolo "#", # e os caracteres após # são chamados de hash, lidos com window.location.hash. Características: Embora o hash esteja na URL, ele não está incluído na solicitação HTTP; ele é usado para guiar as ações do navegador e é inútil para a segurança do lado do servidor, e o hash não recarregará a página.
2. Modo histórico: o histórico adota os novos recursos do HTML5 e fornece dois novos métodos: pushState(), replaceState() pode modificar a pilha do histórico do navegador e ouvir a mudança de estado do evento popState

6. [Obrigatório] Informe os atributos e funções comuns dos itens de configuração de roteamento

Parâmetros de configuração de roteamento:
- caminho: caminho de salto
- componente : o componente ao qual o caminho é relativo
- nome: rota nomeada
- filhos: Parâmetros de configuração de rotas filhas (aninhamento de rota)
- props: desacoplamento de roteamento
- redirecionar: rota de redirecionamento

7. [Obrigatório] Conte-me sobre os buracos em que você pisou em vue

1 Operar os dados em dados e descobrir que não há resposta
- Razão: Existem muitos métodos no array, alguns irão alterar o array (como pop push) e alguns não irão alterar o array (como slice, filter)
- Solução: pode ser obtido por Vue.set (objeto, atributo, valor), e o atributo recém-adicionado do objeto é responsivo
2. Quando criado opera o dom, um erro é relatado e o dom não pode ser obtido. Neste momento, a instância da instância vue não está montada
- Solução: Vue.nextTick ( função callback para obter
3. Outros podem ser usados livremente, desde que não sejam de nível muito baixo (por exemplo, palavras erradas, posições de código erradas, são problemas de baixo nível. Você pode falar sobre outras coisas, não fale sobre esses dois )

[Pontos de bônus] Qual é o princípio do nextTick do Vue?

1 Por que você precisa do nextTick
- O Vue modifica o DOM de forma assíncrona e não encoraja os desenvolvedores a mexer no DOM diretamente, mas às vezes a empresa precisa lidar com a mudança de dados - o DOM atualizado de acordo, neste momento você pode usar a API Vue.nextTick(callback).
2. Reserva de conhecimento (você não pode dizer, mas precisa saber para evitar acidentes)
- Os dois conceitos de tarefa macro e tarefa micro no loop de eventos
- Tarefas de macro comuns incluem script, setTimeout, setInterval, setImmediate (um temporizador que é executado com mais frequência)
- Microtarefas comuns são, Promise.then(), async
3. Resposta final:
- O princípio do nextTick évue 通过异步队列控制 DOM 更新
- nextTick底层是promise，所以是微任务。这个一定要知道
- (língua oficial): A forma como as funções callback nextTick são executadas sucessivamente. Se você leu o código-fonte desta parte, descobrirá que muitos julgamentos isNative() são feitos nele, porque ainda há um problema de degradação normal da compatibilidade. Pode-se ver que a deliberação e o trabalho árduo da equipe de desenvolvimento do Vue no desempenho.
4. Pequena popularização da ciência: Na verdade, quando a versão do vue é atualizada. Às vezes, nextTick é empacotado como uma tarefa macro e, às vezes, nextTick é empacotado como uma microtarefa. Mas atualmente a versão mais recente do vue2 ,nextTick底层是微任务
- Leitura extracurricular nextTick source code: https://juejin.cn/post/6875492931726376974

[Pontos de bônus] slot v-slot e slot de escopo

1. Função de slot: o componente pai é passado html结构para o componente filho
2. A função do slot nomeado: o componente pai é passado 多个html结构para o componente filho
3. Função de slot de escopo : quando o componente pai passa o slot para o componente filho, os dados dentro do componente filho podem ser usados

[Pontos de bônus] Função e princípio do roteamento vue

Função de roteamento: para obter um aplicativo de página única
Princípio: monitorar o valor de hash da localização

[Pontos de bônus] Quais são os métodos de personalização de instruções? Quais funções de gancho ele possui? Quais outros parâmetros de função de gancho?

Diretiva de definição global: Existem dois parâmetros no método de diretiva do objeto vue, um é o nome da diretiva e o outro é a função. Definir diretivas em componentes: diretivas
Funções de gancho: bind (acionado por eventos de ligação), inserido (acionado quando os nós são inseridos), atualização (atualizações relacionadas nos componentes)
Parâmetros da função de gancho: el, binding