visão geral do vue

Vantagens do Vvue:

Estrutura leve: foco apenas na camada de visualização, é uma coleção de visualizações para construir dados, o tamanho é de apenas Kb instantâneo
Fácil de aprender: desenvolvimento chinês, documentos chineses, sem barreiras linguísticas, fácil de entender e aprender
Vinculação de dados bidirecional: mantém as características do angular e é mais simples na manipulação de dados
Componentização: retém as vantagens do react, realiza o encapsulamento e reutilização do html e tem vantagens exclusivas na construção de aplicativos de página única
Visualização: Os dados e a estrutura são separados, facilitando as alterações de dados, nenhuma alteração de código lógico é necessária e as operações relacionadas podem ser concluídas apenas pela manipulação de dados
DOM virtual: o dom consome muito desempenho, não usa mais nós de operação dom nativos, o que libera bastante as operações do dom, mas a operação específica ainda é dom, mas é outra maneira
Velocidade de execução mais rápida: Comparado com o react, ele também opera em domínio virtual. Em termos de desempenho, o vue tem grandes vantagens

Fale sobre o seu entendimento sobre SPA de página única, quais são suas vantagens e desvantagens

SPA carrega apenas o HTML, JS e CSS correspondentes quando a página da web é inicializada
Depois que a página for carregada, o SPA não recarregará ou saltará a página devido a ações do usuário
A mudança da página consiste em utilizar o mecanismo de roteamento para realizar a transformação do conteúdo HTML, evitando o recarregamento da página

vantagem:

A experiência do usuário é boa, a alteração do conteúdo não precisa recarregar a página inteira, evitando saltos desnecessários e renderizações repetidas
Reduza saltos desnecessários e renderizações repetidas, o que reduz relativamente a pressão no servidor
Separação de responsabilidades de front-end e back-end, estrutura clara, lógica de interação de front-end, back-end responsável pelo processamento de dados

deficiência:

Demora muito para carregar pela primeira vez
As funções de avanço e retrocesso do navegador não podem ser usadas. Como o aplicativo de página única exibe todo o conteúdo em uma página, é impossível avançar e retroceder
Não é propício à recuperação do mecanismo de pesquisa: como todo o conteúdo é substituído dinamicamente e exibido em uma página, ele tem sua fraqueza natural no SEO

Como resolver a lentidão de carregamento da primeira tela do SPA

Tempo da primeira tela: refere-se ao tempo desde o momento em que o navegador responde à URL inserida pelo usuário até o momento em que o conteúdo da primeira tela é renderizado. Nesse momento, a página inteira não precisa necessariamente ser renderizada completamente, mas precisa para exibir o conteúdo exigido pela janela atual.

Razões para o carregamento lento da primeira tela:

Problema de atraso de rede
Se o tamanho do arquivo de recursos é muito grande
Se o recurso enviou repetidamente solicitações para carregar
Ao carregar o script, o conteúdo renderizado é bloqueado

Vários métodos comuns de otimização da primeira tela do SPA

Reduza o tamanho do arquivo de entrada
Cache local de recurso estático
Estrutura de UI carregada sob demanda
Compressão de recursos de imagem
Os componentes são reembalados
Habilitar empacotamento Gzip
usar SSR

Existe um blog escrito sobre SPA que é muito detalhado. Se você estiver interessado, pode dar uma olhada: Explique o que o SPA
Vue faz durante a inicialização (novo Vue (opções))

Processando itens de configuração: Ao inicializar o componente raiz, a operação de mesclagem de opções foi executada e a configuração global foi mesclada na configuração local do componente raiz; quando cada subcomponente foi inicializado, alguma otimização de desempenho foi executada e alguns ajustes profundos atributos de nível no objeto de configuração do componente foram colocados na opção vm.$options para melhorar a eficiência de execução do código
Inicialize as propriedades de relacionamento da instância do componente, como pai, filhos, raiz, referências, etc.
Lidar com eventos personalizados
Chame a função de gancho before Create
Inicialize o item de configuração de injeção do componente, obtenha o objeto de configuração na forma de ref[key]=val, execute o processamento responsivo no objeto de configuração e faça proxy de cada chave para o exemplo de VM
Responsivo de dados, adereços de processamento, métodos, dados, computados, observação e outras opções
Analise o objeto fornecido no item de configuração do componente e monte-o no atributo vm_provided
Chame a função de gancho criada
Caso seja constatado que existe a opção el na configuração, o método $mount será chamado automaticamente. Ou seja, com a opção el., não há necessidade de chamar manualmente o método $mount. De qualquer forma, se a opção el. el opção não é fornecida, $mount deve ser chamado
Em seguida, entre na fase de montagem

Compreensão do MVVM

MVVM consiste em três partes: Model, View e ViewModel: a camada Model representa o modelo de dados, e a lógica de negócios de modificação e operação de dados também pode ser definida no Model; a View representa o componente UI, que é responsável por converter o modelo de dados em uma exibição de UI; o View Model é um objeto Sincronizar View e Model

Na arquitetura MVVM, não há conexão direta entre View e Model, mas através de ViewModel. A interação entre Model e ViewModel é bidirecional, portanto, as alterações nos dados do View serão sincronizadas com o Model, enquanto as alterações nos dados do Model também serão refletidas imediatamente. na Vista.

ViewModel conecta as camadas View e Model por meio de ligação de dados bidirecional, e a sincronização entre View e modelo é totalmente automática, sem qualquer intervenção. Portanto, os desenvolvedores só precisam prestar atenção à lógica de negócios e não precisam operar manualmente o DOM. Sincronização do estado dos dados, manutenção complexa do estado dos dados é totalmente gerenciada pelo MVVM

Princípio de ligação bidirecional de dados Vue

Para realizar a ligação bidirecional de dados MVVM, ele adota o método de sequestro de dados combinado com o modo editor-assinante. Object.defineProperty() é usado para adicionar setters e getters a cada propriedade e sequestrar o monitoramento. Quando os dados mudam, ele publica uma mensagem para o assinante e aciona o retorno de chamada do ouvinte correspondente.

Algumas coisas devem ser feitas:

Implemente um observador de ouvinte de dados, que pode monitorar todas as propriedades do objeto de dados. Se houver alguma alteração, você pode obter o valor mais recente e notificar os assinantes
Implementar um analisador de comando Compilar, verificar e analisar o comando de cada nó de elemento, substituir os dados de acordo com o modelo de comando e vincular a função de atualização correspondente
Implementar um observador como uma ponte conectando Observer e Compile, capaz de assinar e receber notificações de cada alteração de atributo, executar a função de retorno de chamada correspondente da instrução e atualizar a visualização

Princípio responsivo do Vue

O que é responsivo, ou seja, quando os dados mudam, a visualização será renderizada novamente e a correspondência será atualizada para o valor mais recente

Object.defineProperty define os métodos get. e set. para cada propriedade no objeto. Cada propriedade declarada terá subs coletores de dependência dedicados. Quando uma página usa uma determinada propriedade, ela acionará a função Object.defineProperty-get, o observador de a página será colocada nos subs do coletor de dependência da propriedade e, quando os dados mudarem, a notificação será atualizada: quando os dados mudarem, a função Object.defineProperty-set será acionada e os dados passarão por seus próprios subs do coletor de dependência , notifique o observador um por um e a visualização começará a ser atualizada;

Princípio de dados responsivos do Vue 3.x:

Vue3.x usa Proxy em vez de object.defineProperty. Como o proxy pode monitorar diretamente as alterações de objetos e matrizes e tem até 13 métodos de interceptação e, como um novo padrão, será continuamente otimizado pelos fabricantes de navegadores; o proxy só proxy A primeira camada do objeto, como o vue3 lida com isso

Determine se o valor de retorno atual de Reflect.get é um objeto e, em caso afirmativo, use o método reativo como proxy, realizando assim uma observação aprofundada. Ao monitorar a matriz, get/set pode ser acionado várias vezes, então como evitar vários acionadores? Podemos julgar se a chave é o atributo do próprio objeto proxy atual ou se o valor antigo é igual ao novo valor. Somente quando uma das duas condições acima for atendida o gatilho pode ser executado

Por que o Vue 3.0 usa API proxy em vez de API defineProperty

O maior motivo para a limitação da API definePropety é que ela só pode monitorar propriedades singleton. A implementação responsiva em Vue2.x é formalmente baseada no descritor em objectProperty. Ela percorre e recursa as propriedades nos dados e define um valor para cada propriedade. .getter/setter. É por isso que vue só pode responder a atributos definidos em dados
O monitoramento da API Proxy é direcionado a um objeto, portanto todas as operações neste objeto entrarão na operação de monitoramento, que pode proxy completo de todos os atributos, o que trará grande melhoria de desempenho e melhor código; Proxy pode ser entendido como, configurar um camada de "interceptação" antes do objeto alvo, e o acesso do mundo externo ao objeto deve primeiro passar por essa camada de interceptação, portanto, é fornecido um mecanismo para filtrar e reescrever o acesso do mundo externo
Reativo é preguiçoso. No Vue2.x, para um objeto com aninhamento profundo de propriedades, se você quiser sequestrar suas mudanças internas profundas, será necessário percorrer recursivamente o objeto, executar Object.defineProperty e tornar cada camada de dados do objeto responsiva. Não há dúvida de que haverá muito consumo de desempenho. No Vue3.0, o uso da API Proxy não pode monitorar alterações de propriedades de nível profundo dentro do objeto, portanto, seu método de processamento é responder recursivamente no getter. A vantagem disso é que as propriedades internas que são realmente acessadas se tornarão respostas simples. Em termos, pode-se dizer que implementa capacidade de resposta sob demanda e reduz o consumo de desempenho.

Prós e contras de proxy e Object.defineProxy

O proxy pode ouvir diretamente objetos em vez de propriedades
O proxy pode monitorar alterações em arrays
O proxy possui 13 métodos de interceptação: não limitado a apply, ownKeys, deleteProperty, has, etc., que Object.defineProperty não possui
Proxy retorna um novo objeto, só podemos operar o novo objeto para atingir o propósito, e Object.defineProperty só pode percorrer as propriedades do objeto e modificar diretamente
Como um novo padrão, o Proxy será continuamente otimizado pelos fabricantes de navegadores, o que é o bônus de desempenho do lendário novo padrão.
Vantagens do ObjectProperty: boa compatibilidade, suporte para IE9 e Proxy tem problemas de compatibilidade do navegador e não pode ser suavizado com polyfill, então o autor do Vue declara que precisa esperar até a próxima versão principal (3.0) para usar o Proxy para recriar

Por que os dados de um componente no Vue são uma função, e em uma nova instância do Vue, os dados podem ser um objeto diretamente

Sabemos que cada arquivo .vue é um componente Vue, e um componente Vue é na verdade uma instância Vue. As instâncias em Js são criadas por meio de construtores, e cada construtor pode criar muitas romãs, portanto, cada instância continuará o método ou propriedade no protótipo. Os dados do Vue são na verdade um atributo no protótipo Vue e os dados existem na memória. Para garantir a independência dos dados em cada instância, Vue estipula que funções devem ser utilizadas em vez de objetos. Devido ao uso de objetos, os dados usados em cada instância (componente) afetam uns aos outros, o que obviamente não é o que queremos. Um objeto é uma referência a um endereço de memória. Se um objeto for definido diretamente, esse objeto será usado entre componentes, o que fará com que os dados entre os componentes afetem uns aos outros. Depois de usar a função, a função data() é usada, e isso na função data() aponta para a própria instância atual, portanto não afetará um ao outro. A instância do novo Vue não será reutilizada, portanto não há problema de referenciar objetos.

O atributo de dados no Vue pode ter o mesmo nome que o método nos métodos? Por quê?

O atributo data no Vue pode ter o mesmo nome do método nos métodos, mas o método nos métodos será substituído pelo atributo data e uma mensagem de erro aparecerá no depurador, mas não afetará a execução. A razão para isso é: a ordem de execução interna da função initState definida pelo código-fonte é: props>methods>data>computed>watch

A diferença entre criado e montado em Vue

Na fase de criação, a instância foi inicializada, mas não foi montada em el, portanto não podemos obter o nó correspondente, mas neste momento podemos obter os dados em data e métodos em vue;

Na fase montada, o template do vue é montado com sucesso em el.Neste momento, uma página completa pode ser exibida no navegador, então nesta fase o nó pode ser chamado;

A diferença entre métodos computados e métodos em Vue

Métodos computados e têm o mesmo ponto: se forem exibidos como dados de modelo, ambos podem realizar a função correspondente, a única diferença é que o método definido pelos métodos precisa ser executado

A diferença entre métodos computados e:

Os concorrentes serão armazenados em cache com base nos dados de resposta, enquanto os métodos não serão armazenados em cache
Antes do diff, verifique se os dados nos dados foram alterados. Se não houver alteração, o método computado não será executado, mas o método nos métodos será executado
computado é uma chamada de propriedade e métodos é uma chamada de função

O papel da chave no DOM virtual

Simplificando: a chave é o identificador exclusivo do objeto DOM virtual e a chave desempenha um papel extremamente importante na atualização da exibição.
Para ser mais complicado: quando os dados no estado mudam, o react irá gerar um novo DOM virtual com base nos novos dados e, em seguida, o React realizará uma comparação entre o novo DOM virtual e o antigo DOM virtual.
As regras de comparação são as seguintes: Se a mesma chave do novo DOM virtual for encontrada no antigo DOM virtual, se o conteúdo do DOM virtual não tiver mudado, o DOM real anterior será usado diretamente; se o conteúdo do DOM virtual O DOM mudou, um novo DOM real será produzido. Em seguida, substitua o DOM real anterior na página. Se a mesma chave do novo DOM virtual não for encontrada no antigo DOM virtual, um novo DOM real será criado com base nos dados e, em seguida, renderizado na página.

Usar índice como chave pode causar problemas

Se os dados forem destruídos por operações como adicionar em ordem inversa/excluir em ordem inversa, serão geradas atualizações reais desnecessárias do DOM.Embora não haja nenhum problema com a interface, se houver muitos dados, a eficiência será muito baixa;
Se a estrutura também contiver o DOM da classe de entrada, irá gerar um erro de atualização do DOM e a interface terá problemas
Se não houver operação de ordem inversa nos dados, ela estará limitada à renderização da tabela para exibição e não haverá problema em usar o índice como chave

Explicação detalhada do uso do relógio no Vue

No Vue, watch é usado para monitorar alterações de dados, que podem ser escritas como objetos por trás dos dados monitorados, incluindo métodos manipuladores, imediatos e profundos
imediato indica se o manipulador deve ser executado quando o relógio é vinculado pela primeira vez, um valor verdadeiro indica que quando o relógio é declarado, o método do manipulador é executado imediatamente e um valor falso é o mesmo que o uso geral de um observe, somente quando os dados mudam Execute o manipulador.
Quando é necessário monitorar as alterações de um objeto, o método de observação comum não pode monitorar as alterações nas propriedades internas do objeto. Somente os dados nos dados podem monitorar as alterações. Neste momento, a propriedade profunda é necessária para monitorar o objeto profundamente, e o valor é verdadeiro

Compreensão e uso de mixins em Vue

Mixins são uma forma muito flexível de distribuir funcionalidades reutilizáveis em componentes Vue. Um objeto misto pode conter qualquer opção de componente. Quando um componente usa um objeto misto, todas as opções do objeto misto serão misturadas nas opções do próprio componente. Depois que os mixins são introduzidos no componente, o conteúdo interno do componente, como como dados e outros métodos, métodos e outros atributos Mesclar com o conteúdo correspondente do componente pai. É equivalente a isso, após a introdução, vários métodos de atributos do componente pai foram expandidos.

Existe um blog muito bom, você pode consultá-lo: mixins

Slots em Vue: A arma mágica em Vue, slot slot!

Por que Vue usa renderização assíncrona

Vue é uma atualização em nível de componente. Se os dados no componente atual mudarem, ele atualizará o componente. Quando os dados mudam, o componente precisa ser renderizado novamente uma vez e o desempenho não é alto.Para evitar que o componente seja atualizado assim que os dados forem atualizados, é feita uma renderização assíncrona. (O método principal é nextTick)
O princípio da implementação do código-fonte: quando os dados mudam, o método de notificação será chamado, o observador será percorrido e o método de atualização será chamado para notificar o observador para atualizar. Neste momento, o observador não será executado imediatamente. Na atualização, o método queueWatcher será chamado para colocar o inspetor em uma fila, o queueWatcher será desduplicado de acordo com o inspetor. Vários atributos dependem de um inspetor. Se não houver nenhum inspetor na fila, o inspetor será adicionado ao inspetor. fila e, em seguida, o método flushSchedulerQueue será executado de forma assíncrona por meio de nextTick para atualizar a fila do inspetor. O flushSchedulerQueue começará a acionar um método before, que na verdade é beforeUpdate, e então watcher.run() começará a realmente executar o observador. Após a execução da página, a renderização será concluída e o gancho atualizado será chamado após a conclusão da atualização.

Como o mecanismo de atualização assíncrona do Vue é implementado

O núcleo do mecanismo de atualização assíncrona do Vue é implementado usando a fila de tarefas assíncronas do navegador. A fila de microtarefas é preferida, seguida pela fila de macrotarefas.
Quando os dados responsivos são atualizados, o método dep.notify será chamado para notificar o inspetor coletado no dep para executar o método de atualização, e watcher.upadte colocará o próprio inspetor em uma fila de inspetores (matriz de fila global). Em seguida, coloque um método para atualizar a fila do observador (flushSchedulerQueue) em uma matriz de retornos de chamada globais por meio do método nextTick. Se não houver nenhuma função chamada flushCallbacks na fila de tarefas assíncronas do navegador neste momento, execute a função timeFunc e coloque a função flushCallbacks na fila de tarefas assíncronas. Se já houver uma função flushCallbacks na fila de tarefas assíncronas, aguarde até que ela seja executada antes de adicionar a próxima função flushCallbacks. A função flushCallbacks é responsável por executar todas as funções flushSchedulerQueue no array de retornos de chamada. A função flushSchedulerQueue é responsável por atualizar a fila do inspetor, ou seja, executar o método run de cada inspetor na matriz da fila para entrar na fase de atualização, como executar a função de atualização do componente ou executar a função de retorno de chamada do relógio do usuário.

Compreensão de $nextTick

Uso de $nextTick: Execute um retorno de chamada atrasado após o término do próximo ciclo de atualização do DOM. Use este método imediatamente após modificar os dados para obter o DOM atualizado.
O princípio da implementação, por quê: A implementação da capacidade de resposta do Vue não consiste em alterar o DOM imediatamente após a alteração dos dados, mas em atualizar o DOM de acordo com uma determinada estratégia. O Vue é executado de forma assíncrona ao atualizar o DOM. Contanto que detecte alterações nos dados, o Vue abrirá uma fila e armazenará em buffer todas as alterações de dados que ocorrerem no mesmo loop de eventos. Se o mesmo inspetor for acionado várias vezes, ele só será colocado na fila uma vez. Essa desduplicação durante o buffer é muito importante para cálculos desnecessários e manipulação de DOM. No entanto, no próximo loop de eventos 'tick', o Vue libera a fila e executa o trabalho real (para desduplicar). Portanto, para esperar que o Vue termine de atualizar o DOM após a alteração dos dados, você pode usar Vue.nextTick(callback) imediatamente após a alteração dos dados, para que a função de retorno de chamada seja chamada após a conclusão da atualização do DOM.
Cenário de uso: depois de atualizar os dados, você precisa operar o DOM renderizado a tempo.

Diretivas personalizadas para Vue

Vue Além das instruções integradas padrão para funções principais, o Vue também permite o registro de instruções personalizadas
Instruções personalizadas são usadas para operar: DOM, embora Vue defenda o conceito de visualizações orientadas a dados, nem todas as situações são adequadas para orientação a dados, as instruções personalizadas são um complemento e extensão eficaz, não só podem ser usadas para definir qualquer operação DOM, e é reutilizável.
Duas maneiras de adicionar diretivas personalizadas: diretivas globais e diretivas locais
Diretiva global: Registre uma diretiva global por meio da função Vue.directive()
Instrução local: Adicione uma instrução local ao componente por meio da propriedade diretivas do componente.
Existem vários blogs bem escritos, se você estiver interessado, pode dar uma olhada na explicação detalhada: instruções personalizadas
Cenários usados: como v-image: o avatar padrão para login

Por que evitar usar v-if e v-for juntos

Na versão vue 2.x, quando v-if é usado junto com v-for, v-for tem uma prioridade mais alta que v-if
Na versão vue 3.x, quando v-if é usado junto com v-for, v-if tem uma prioridade mais alta que v-for
O funcionário aponta claramente: Evite usar v-if e v-for juntos e nunca use essas duas instruções em um elemento ao mesmo tempo
Solução para esta solução: Você pode primeiro filtrar os dados nos dados de cálculo e depois realizar a renderização transversal, não há problema com a operação e implementação, e a página será exibida normalmente, mas trará consumo desnecessário de desempenho.

Semelhanças e diferenças entre v-show e v-if

O mesmo ponto: tanto v-show quanto v-if podem controlar a exibição e ocultação de elementos.
Diferenças: O método de implementação é diferente. A essência do v-show é controlar a ocultação definindo a configuração de exibição em css como none; v-if é adicionar ou excluir dinamicamente elementos DOM da árvore DOM; v-show será compilado e o valor inicial é falso. Basta definir a exibição como nenhum, mas ele também compila; o valor inicial de v-if é falso, ele não será compilado;
v-show é compilado apenas uma vez, e o último é na verdade para controlar css, enquanto v-if é constantemente destruído e criado.Se você deseja trocar um nó com frequência, v-show tem melhor desempenho
Cenários usados no desenvolvimento real: controle de permissão de botão v-if, condições de filtro de caixa de seleção, controle de exibição e ocultação de botão: v-show;

Por que o Vue escuta eventos em HTML

Você deve ter notado que essa forma de ouvir eventos vai contra a antiga tradição de separação de preocupações. Mas não se preocupe, porque todos os métodos e expressões de manipulação de eventos do Vue.js estão estritamente vinculados ao ViewModel da visualização atual, isso não causará nenhuma dificuldade de manutenção.
Na verdade, usar v-on ou @ tem vários benefícios:
Você pode localizar facilmente o método correspondente no código JavaScript olhando para o modelo HTML, porque você não precisa vincular eventos manualmente em JavaScript, seu código ViewMode pode ser uma lógica muito pura, completamente desacoplada do DOM e mais fácil de testar . Quando um ViewModel é destruído, todos os manipuladores de eventos são removidos automaticamente, você não precisa se preocupar em limpá-los

Vue.set altera propriedades em arrays e objetos

Em uma instância de componente, apenas os dados inicializados em data são responsivos. O Vue não pode monitorar a adição ou exclusão de propriedades do objeto. Propriedades não declaradas nos dados não respondem, portanto, os dados mudam, mas não na renderização da página;
Solução: Use o método Vue.set(object,key,value) para adicionar propriedades de resposta a objetos aninhados.
Vue.set(objeto,chave,valor) alias vm.$set
O que vm.$set(obj,key,value) faz: Como o Vue não pode detectar a nova propriedade do objeto ou adicionar um elemento ao array por meio do índice, existe vm.set, que é um alias do Vue. set; vm.set é usado para adicionar uma nova propriedade a um objeto reativo, garantir que a nova propriedade também seja responsiva e acionar uma atualização de visualização.
Adicione dados responsivos ao objeto: chame o método defineReactive para fornecer os dados reativos para o objeto e, em seguida, execute dep.notify para notificar a dependência e atualizar a visualização.
Adicione novos dados responsivos ao array: por meio do método splice

Fale sobre a compreensão do ciclo de vida do Vue

Ciclo de vida do Vue: em termos leigos, o processo da instância do Vue desde a criação até a destruição, oito funções de gancho
beforecreate (antes da interface de inicialização) criado (após a interface de inicialização)
beforemount (antes da interface de renderização) montado (após a interface de renderização)
beforeupdate (antes de atualizar os dados) atualizado (depois de atualizar os dados)
beforedestory (antes de desinstalar componentes) destruído (após desinstalar componentes)
Vale ressaltar que quando essa pergunta for feita, você poderá explicar o que as oito funções de gancho fazem.

Quais ganchos serão acionados no carregamento da primeira página: beforeCreate, criado, beforemount, montado

Quais são os métodos de comunicação dos componentes Vue

De pai para filho: adereços. Os componentes pais passam dados para os componentes filhos por meio de adereços. Existem três formas de dados de subcomponentes: adereços, dados, dados computados
Pai para filho/neto: fornecer e injetar. O componente pai define o retorno do método provide que precisa ser compartilhado com os atributos dos componentes descendentes, e os componentes descendentes usam a opção inject para receber os atributos especificados que queremos adicionar a esta instância;
De filho para pai: $emit. O componente filho envia uma mensagem ao componente pai por meio do evento $emit() e o componente pai recebe dados por meio do evento de ligação v-on;
Pai-filho, irmão, nível cruzado: eventBus. Este método usa uma instância Vue vazia como barramento de eventos central (centro de eventos), usa-a para (emitir) acionar eventos e (ligar) ouvir eventos e realiza a comunicação entre quaisquer componentes de forma engenhosa e clara
Plug-in de comunicação: PubSub.js
Vuex: vuex é o gerenciador de estado do vue e os dados armazenados são responsivos. Você só precisa colocar o valor compartilhado no vuex, e outros componentes necessários podem ser obtidos e usados diretamente;

A diferença entre roteador e rota

Como uma instância do VueRouter, o roteador é equivalente a um objeto roteador global, que contém muitas propriedades e subobjetos, como o objeto histórico. Links de salto usados com frequência podem usar this.$router.push, que é o mesmo que salto de link do roteador.
rota é equivalente ao objeto de roteamento que está saltando no momento, e você pode obter nome, caminho, parâmetros, consulta, etc.

Vue-router tem várias funções de gancho

Roteamento global: Existem dois tipos principais de ganchos de navegação de roteamento global: pré-guarda (beforeEach), pós-hook (afterEach)
Ganchos somente de roteamento: ganchos de navegação exclusivos para uma única rota, que são definidos diretamente na rota de configuração
Ganchos de navegação em componentes: Existem três tipos principais de ganchos de navegação em componentes: beforeRouteEnter, beforeRouteUpdate e beforeRouteLeave. Eles são definidos diretamente dentro do componente de roteamento.
O roteamento detalhado pode ser visto

Modo de salto de roteamento do roteador Vue

Declarativo (salto de rótulo)
Programático (js jump)

Parâmetros de roteamento do roteador Vue

ruoter-link Execute o botão da página transferência de parâmetro de salto de roteamento: transferência de parâmetro de configuração de roteamento no roteador; componente pai home clique para transferir parâmetro; componente filho homeDetails aceita transferência de parâmetro
Existe um blog melhor que você pode consultar.
this.$router.push para parâmetros de transferência de salto de roteamento programático: parâmetros de configuração de roteamento no roteador; componente pai home clique para passar parâmetros; componente filho homeDetails aceita parâmetros. Entre eles, os parâmetros de configuração de roteamento são passados por parâmetros, existem duas formas: configuração de roteamento, configuração de roteamento de nome ou configuração de roteamento de consulta;
Existe um blog melhor que você pode consultar.

Compreensão do keep-alive

Primeiro de tudo, <keep-alive> é um componente integrado do Vue. Ele pode manter o estado na memória durante a troca de componentes, evitando a renderização repetida do DOM.
Em segundo lugar, a razão pela qual ele é implementado, quando <keep-alive> agrupa componentes dinâmicos, irá armazenar em cache instâncias de componentes inativos em vez de destruí-los.

O que é Vuex, o que ele faz e como usá-lo

Vuex é um mecanismo para realizar o gerenciamento do estado global (dados) dos componentes, o que pode facilitar o compartilhamento de dados dos componentes.
A Vuex gerencia centralmente os dados compartilhados, que são fáceis de desenvolver e manter posteriormente
Vuex pode realizar o compartilhamento de dados entre componentes e melhorar a eficiência do desenvolvimento
Os dados armazenados no Vuex by Vuex são responsivos e podem manter páginas e dados sincronizados em tempo real
Atributos principais importantes do Vuex incluem: estado, mutações, ação, getters, módulos
state :vuex usa uma única árvore de estados, ou seja, cada aplicação conterá apenas uma instância de armazenamento, mas uma única árvore de estados não entra em conflito com a modularidade. O estado dos dados armazenados não pode ser modificado diretamente, eles precisam passar por mutações.
mutações: O método definido modifica dinamicamente o estado ou os dados na loja do Vuex
ação: Pode ser entendido como a mudança do método de processamento de dados em mutações para um método de processamento de dados assíncrono, ou seja, são dados operacionais de forma assíncrona. A camada View distribui ações por meio de store.dispath.
getters: Propriedades computadas semelhantes a vue, usadas principalmente para filtrar alguns dados
módulos: Quando o projeto é particularmente complicado, cada módulo pode ter seu próprio estado, mutação, ação e getters para tornar a estrutura muito clara e fácil de gerenciar; existe um blog melhor para ler
Cenário de uso: Se o aplicativo for simples o suficiente, é melhor não usar o vuex, um modo de armazenamento simples é suficiente; quando você precisar construir um aplicativo de página única de médio a grande porte, use o vuex para gerenciar melhor o estado fora do componente.

Qual é a diferença entre Vuex e objetos globais puros

O armazenamento estatal da Vuex é reativo. Quando o componente vue lê o estado da loja, se o estado da loja mudar, o componente correspondente será atualizado com eficiência de acordo. O estado na loja não pode ser alterado diretamente. A única maneira de alterar o estado na loja é enviar (confirmar) explicitamente a mutação, o que nos permite rastrear facilmente cada mudança de estado, para que possamos implementar algumas ferramentas para nos ajudar a melhorar Conheça bem nosso aplicativo.

Por que as operações assíncronas não podem ser feitas em mutações do Vuex

Porque depois que a mutação for executada, ela corresponderá a uma nova mudança de estado, então os devtools podem salvar o instantâneo do irmão mais velho e então a viagem no tempo pode ser realizada. Se a mutação suportar operações assíncronas, não há como saber quando o estado é atualizado e é impossível rastrear bem o estado, o que dificulta a depuração.

O que é axios, quais são suas características e sintaxe comum

axios é uma biblioteca HTTP baseada em promessas que pode ser usada no navegador e node.js.
A biblioteca de solicitação Ajax mais popular para front-end.
react/vue recomenda oficialmente o uso de axios para enviar solicitações ajax
Características:
Uma biblioteca de solicitação ajax assíncrona baseada em promessa que oferece suporte a todas as APIs de promessa
Tanto o navegador quanto o nó podem ser usados, e XMLHttpRequest é criado no navegador
Suporte para interceptadores de solicitação/resposta
Cancelamento de solicitação de suporte
Pode converter dados de solicitação e dados de resposta e converter automaticamente o conteúdo da resposta em dados do tipo JSON
Várias solicitações em lote
A segurança é maior e o cliente suporta defesa contra XSRF, o que significa que cada uma de suas solicitações possui um cookie para obter a chave. De acordo com a política de mesma origem do navegador, sites falsos não podem obter a chave em seu cookie. Em desta forma, o background pode identificar facilmente se esta solicitação é uma entrada enganosa de um usuário em um site falso, de modo a adotar a estratégia correta
Sintaxe comum:
axios(config): a forma geral/mais essencial de enviar qualquer tipo de solicitação
axios(url[,config]): Você pode especificar a URL para enviar uma solicitação get
axios.request(url[,config]): equivalente a axios(config)
axios.get(url[,config]) enviar solicitação de obtenção
axios.delete(url[,config]) envia solicitação de exclusão
axios.post(url[,data,config]) enviar solicitação de postagem
axios.put(url[,data,config]) enviar solicitação de colocação
A configuração global padrão solicitada por axios.defaults.XXX
axios.interceptors.request.use() ; adicione um interceptador de solicitação
axios.interceptors.response.use(); Adicionar interceptador de resposta
axios.create([config]); cria um novo axios (não possui as funções abaixo)
axios.Cancel(); Objeto de erro usado para criar uma solicitação de cancelamento
axios.CancelToken(); Objeto token usado para criar uma solicitação de cancelamento
axios.isCancel(); É um erro cancelar a solicitação
axios.all(promises) é usado para executar várias solicitações assíncronas em lotes
axios.spread(): um método usado para especificar uma função de retorno de chamada que recebe todos os dados bem-sucedidos

Você sabe alguma coisa sobre SSR? Que problemas ele resolve principalmente?

Renderização do lado do servidor Chamamos isso de SSR, que significa renderização do lado do servidor; refere-se à tecnologia de processamento de página que completa a emenda da estrutura HTML da página pelo lado do servidor, envia-a para o navegador e, em seguida, vincula o status e eventos para se tornar um processo de página totalmente interativo.
Vantagens: Fácil para SEO, os buscadores priorizam o rastreamento da estrutura HTML da página. Ao usar o SSR, o servidor já gerou HTML relacionado ao negócio, o que favorece o SEO; renderização na primeira tela, os usuários não precisam aguarde a conclusão de todo js.loading da página Veja a visualização da página (a pressão chega ao servidor, então é necessário pesar quais são renderizadas pelo servidor e quais são entregues ao cliente)
Desvantagens: Complexidade, a complexidade deste ou daquele projeto, o desempenho será afetado; a carga do servidor se torna maior, em comparação com os servidores front-end e back-end separados que só precisam fornecer recursos estáticos, a carga do servidor é maior, então use-o com cautela.

Vue. Como fazer gerenciamento de permissões, como controlar a permissão no nível do botão

tenha um blog melhor
No projeto real: a empresa possui um sistema de gerenciamento de permissões, acesso, permissões de configuração, introduzidas no código, permissões de botão são utilizadas em conjunto com v-if por meio de instruções customizadas

O ambiente de desenvolvimento front-end do projeto Vue solicita problema de cruzamento de interface do lado do servidor

Para a versão vue-cli 2.x, configure o proxy do servidor na pasta de configuração
Para a versão vue-cli 3.x, o proxy do servidor de configuração front-end é definido em vue.config.js: por exemplo, o valor do atributo correspondente do destino é: o host + porta para a qual você enviará a solicitação ao servidor back-end; o significado é: equivalente ao O host + porta que o front-end envia a solicitação é automaticamente substituído pelo host e porta montados, para que não haja problemas de domínio cruzado entre o front-end e portas de host front-end;
ws: Indica o protocolo webScoket
changeOrigin: true; Indica se o nome de domínio original será alterado, isso deve ser verdadeiro; desta forma não haverá problemas entre domínios.

Quais otimizações de desempenho do VUE foram feitas:

Estágio de codificação: minimize os dados nos dados, os dados nos dados adicionarão getters e setters, e os observadores correspondentes serão coletados; v-if e v-for não são usados juntos; anti-shake, estrangulamento; use carregamento lento de rotas , componentes assíncronos; O terceiro módulo é importado sob demanda; as imagens são carregadas lentamente; listas longas são roladas para a área visível e carregadas dinamicamente; a chave é garantida como única; As páginas SPA usam componentes de cache keep-alive; se você precisar use v-for para vincular eventos a cada elemento, use-o proxy de evento
Otimização SEO: SSR de renderização no servidor; pré-renderização;
Otimização de empacotamento: código compactado; Tree Shaking/ScopeHoisting; uso de cdn para carregar o terceiro modelo; happypack de empacotamento multithread; splitChunks para extrair arquivos públicos; otimização de sourceMap
Você já aprendeu sobre o vue 3.x?Você pode me dizer a diferença entre o vue 2.x e o vue 2.x?

tenha um blog legal

Qual é a diferença entre a API de composição usada pelo Vue 3.0 e a API de opções usada pelo Vue 2.x

API de opções: Contém opções de objeto que descrevem opções de componentes (dados, métodos, adereços, etc.); API desenvolve componentes complexos, e o código da mesma lógica funcional é dividido em opções diferentes; usar mixin para reutilizar código comum também apresenta problemas: como conflitos de nomenclatura, a fonte dos dados não é clara
API de composição: um novo conjunto de APIs adicionado pelo Vue 3. É uma API baseada em funções que pode organizar a lógica dos componentes de forma mais flexível; resolve o problema de que a API de opções não é fácil de dividir e reutilizar em projetos de grande escala .

Problemas encontrados no elment-ui:

O estilo de seleção múltipla el-cascader não é normal no IE

problema de altura do seletor de cascata
As linhas aparecem nas colunas fixas da Tabela

Acho que você gosta