Série de entrevistas front-end de 2023 - Capítulo Vue

Resumo das perguntas comuns da entrevista Vue

Modelo MVVM?

MVVM, Model-View-ViewModelabreviatura de MVVM, é essencialmente MVCuma versão atualizada do modelo. Entre eles Model, representa o modelo de dados, Viewrepresenta a página que você vê ViewModele é a ponte entre e. Os dados serão vinculados à Viewcamada e renderizarão automaticamente os dados na página. Quando a visualização for alterada, a camada será notificada para atualizar os dados. Anteriormente a visualização era atualizada por meio de ações, agora é .ModelViewModelViewModelDOM数据驱动视图

Ciclo de vida do Vue

O ciclo de vida do Vue pode ser dividido em 8 etapas: antes e depois da criação, antes e depois da montagem, antes e depois da atualização, antes e depois da destruição, bem como o ciclo de vida de alguns cenários especiais. O Vue 3 também adiciona três novas cenas para depuração e renderização no servidor.

Ganchos de ciclo de vida no Vue 2	Opções de ciclo de vida para API de opções Vue 3	Ganchos de ciclo de vida na API de composição Vue 3	descrever
beforeCreate	beforeCreate	setup()	Antes da criação, os dados neste momento ainda datanão methodsforam inicializados.
created	created	setup()	Após a criação, dataele contém um valor, ainda não foi montado e algumas Ajaxsolicitações podem ser feitas.
beforeMount	beforeMount	onBeforeMount	Antes da montagem, o virtual será encontrado DOMe compilado emRender
mounted	mounted	onMounted	Após a montagem, DOMele é criado e pode ser utilizado para obter acesso a dados e DOMelementos
beforeUpdate	beforeUpdate	onBeforeUpdate	Antes da atualização, pode ser usado para obter vários status antes da atualização
updated	updated	onUpdated	Após a atualização, todos os status estão atualizados
beforeDestroy	beforeUnmount	onBeforeUnmount	Pode ser usado para cancelar alguns temporizadores ou assinaturas antes da destruição
destroyed	unmounted	onUnmounted	Após a destruição, pode ser utilizado para o cancelamento de alguns temporizadores ou assinaturas
activated	activated	onActivated	keep-aliveQuando um componente em cache é ativado
deactivated	deactivated	onDeactivated	keep-aliveQuando um componente em cache é desativado
errorCaptured	errorCaptured	onErrorCaptured	Chamado ao capturar um erro de um componente descendente
-	renderTracked	onRenderTracked	Gancho de depuração, chamado quando dependências reativas são coletadas
-	renderTriggered	onRenderTriggered	Gancho de depuração, chamado quando a dependência reativa é acionada
-	serverPrefetch	onServerPrefetch	Chamado antes da instância do componente ser renderizada no servidor

**Em relação ao ciclo de vida no Vue 3, recomenda-se a leitura da documentação oficial <img src="https://link.juejin.cn/?target=https%3A%2F%2Fcn.vuejs.org%2Fapi% 2Fcomposition-api-lifecycle .html “https://cn.vuejs.org/api/composition-api-lifecycle.html”)[API opcional: opções de ciclo de vida – documentação oficial](https://link.juejin.cn/ ?target= https%3A%2F%2Fcn.vuejs.org%2Fapi%2Foptions-lifecycle.html “https://cn.vuejs.org/api/options-lifecycle.html”” style=”margem: automático” / >

Ciclo de vida dos componentes pai-filho: * 加载渲染阶段: pai beforeCreate -> pai criado -> pai beforeMount -> filho beforeCreate -> filho criado -> filho beforeMount -> filho montado -> pai montado

• 更新阶段: Pai antes de atualizar -> Filho antes de atualizar -> Filho atualizado -> Pai atualizado
• 销毁阶段: pai antes de destruir -> filho antes de destruir -> filho destruído -> pai destruído

Vue.$próximoTick

Execute o retorno de chamada atrasado após o próximo ciclo de atualização do DOM. Use este método imediatamente após modificar os dados para obter o DOM atualizado.

nextTickÉ uma API global fornecida pelo Vue. Devido à estratégia de atualização assíncrona do Vue, nossas modificações de dados não serão refletidas diretamente no DOM. Neste momento, se quisermos obter o status atualizado do DOM imediatamente, precisamos usar este método.

O Vue é executado de forma assíncrona ao atualizar o DOM. Quando os dados mudam, o Vue abre uma fila de atualização assíncrona e armazena em buffer todas as alterações de dados que ocorrem no mesmo loop de eventos. Se o mesmo watcherfor acionado várias vezes, ele só será colocado na fila uma vez. Essa desduplicação durante o buffer é muito importante para evitar cálculos e operações DOM desnecessárias. nextTickO método adicionará uma função de retorno de chamada à fila para garantir que a função seja chamada somente após a conclusão da operação DOM anterior.

cenas a serem usadas:

1. Se desejar obter a DOMestrutura atualizada imediatamente após modificar os dados, você pode usar Vue.nextTick()
2. Operar createdno ciclo de vidaDOM

O que acontece durante o processo de montagem da instância Vue?

O processo de montagem refere-se ao app.mount()processo, que é um processo de inicialização que faz duas coisas como um todo: 初始化e 建立更新机制.

A inicialização criará instâncias de componentes, inicializará estados de componentes e criará vários dados responsivos.

A etapa de estabelecer o mecanismo de atualização executará imediatamente a função de atualização do componente, que executará a função de renderização do componente pela primeira vez e será convertida em; ao mesmo tempo, executar a função de renderização pela primeira vez patchcriará uma dependência entre seu interno dados responsivos e a função de atualização do componente, que fará com que a função de atualização correspondente seja executada quando os dados mudarem no futuro.vnodedom

Princípio de compilação do modelo Vue

Existe um módulo compilador exclusivo no Vue chamado compiler.Sua principal função é templatecompilar funções escritas pelo usuário em renderfunções executáveis ​​​​em js. No Vue, o compilador irá primeiro templateanalisar, esta etapa é chamada parse, após o final, um objeto JS é obtido, que é chamado 抽象语法树AST; depois há ASTum processo de conversão para processamento profundo, esta etapa é chamada , e finalmente o código JS transformobtido anteriormente é gerado AST, ou seja, renderfunção.

Princípios de capacidade de resposta do Vue

1. A capacidade de resposta dos dados no Vue 2 será processada de forma diferente de acordo com o tipo de dados. Se for um objeto, ao Object.defineProperty(obj,key,descriptor)interceptar o acesso ao atributo do objeto, ele detectará e reagirá quando os dados forem acessados ​​ou alterados; se for um array, estenderá seus 7 métodos de mudança (push, pop, shift, unshift, splice, sort , reverso), para que esses métodos possam executar notificações de atualização adicionais para responder. Desvantagens: * A travessia recursiva durante a inicialização causará perda de desempenho; * O processo de atualização de notificação precisa manter um grande número de depinstâncias e watcherinstâncias, o que ocupa muita memória adicional; * Adicionar ou excluir atributos de objetos não pode ser interceptado e precisa para passar Vue.sete deletetal API para entrar em vigor; * Essas estruturas de dados ES6recém-geradas não são suportadas Map. 2. O mecanismo proxy usado no Vue 3 requer dados responsivos. Ele pode suportar objetos e matrizes ao mesmo tempo. Adições e exclusões de atributos dinâmicos podem ser interceptadas. Todas as novas estruturas de dados são suportadas. Os atributos aninhados de objetos são recursivos em tempo de execução e são proxy somente quando usados. Não há necessidade de manter um número particularmente grande. número de dependências e o desempenho foi bastante melhorado. Grande progresso.Set
ES6Proxy

DOM virtual

1. Conceito: Virtual DOM, como o nome sugere, é um objeto DOM virtual, é um objeto JS em si, mas descreve uma estrutura de visualização por meio de diferentes atributos. 2. Benefícios do DOM virtual: (1) Melhoria de desempenho. Existem limitações para operar diretamente o DOM. Existem muitos atributos em um elemento real. Se você operá-lo diretamente, muitos conteúdos de atributos adicionais serão operados ao mesmo tempo. Isto é não é o caso, é necessário. Se essas operações forem transferidas para objetos JS, será muito mais simples. Além disso, operar o DOM é relativamente caro e operações frequentes do DOM podem facilmente causar redesenho e refluxo da página. Se o processamento intermediário for realizado por meio de VNode abstrato, o número de operações DOM diretas poderá ser efetivamente reduzido, reduzindo assim o redesenho e o refluxo da página. (2) É conveniente para implementação de plataforma cruzada. O mesmo nó VNode pode ser renderizado em conteúdo correspondente em plataformas diferentes. Por exemplo: quando renderizado no navegador, é um nó de elemento DOM, e quando renderizado em Native (iOS, Android), torna-se o controle correspondente. O Vue 3 permite que os desenvolvedores implementem renderizadores personalizados baseados em VNode para facilitar a renderização para diferentes plataformas. 3. Estrutura: Não existe um padrão unificado, geralmente incluindo três itens tag:,, propse children. tag:obrigatório. É um rótulo, pode ser um componente ou uma função. props: Opcional. São as propriedades e métodos neste rótulo. children: Opcional. É o conteúdo ou nós filhos desta tag. Se for um nó de texto, é uma string; se tiver nós filhos, é um array. Em outras palavras, se for considerado childrenuma string, significa que deve ser um nó de texto e que esse nó não deve ter elementos filhos. ### algoritmo de comparação

1. Conceito: diffO algoritmo é um algoritmo de comparação. Ao comparar o antigo DOM virtual e o novo DOM virtual, podemos descobrir qual nó virtual mudou. Encontre este nó virtual e atualize apenas o nó real correspondente a este nó virtual. Em vez disso Ao atualizar outros nós que não foram alterados, o DOM real pode ser atualizado com precisão, melhorando assim a eficiência. 2. Método de comparação: diffA estratégia geral do algoritmo é: 深度优先，同层比较. As comparações serão realizadas apenas no mesmo nível e não serão comparadas entre níveis; durante o processo de comparação, o loop diminuirá de ambos os lados para o meio.

• tagPrimeiro, determine se os dois nós são iguais. Se forem diferentes, exclua o nó e crie um novo nó para substituí-lo.
• tagQuando são iguais, os atributos são substituídos primeiro e depois os subelementos são comparados, que se dividem nas seguintes situações: * Quando os nós antigo e novo possuem subelementos, o método de ponteiro duplo é utilizado para comparação. Compare os ponteiros inicial e final antigos e novos, mova o loop para mais perto do meio, chame para patchVnoderepetir patcho processo de acordo com a situação, chame para createElemcriar um novo nó, encontre um nó keyconsistente VNodena tabela hash e, em seguida, opere de acordo com o situação. * Se o novo nó tiver elementos filhos e o nó antigo não tiver elementos filhos, basta converter o nó virtual do elemento filho em um nó real e inseri-lo. * Se o novo nó não tiver elementos filhos e o nó antigo tiver elementos filhos, os elementos filhos serão limpos e definidos como o conteúdo de texto do novo nó. * Quando os nós antigo e novo não possuem elementos filhos, ou seja, ambos são nós de texto, o conteúdo do texto será comparado diretamente e, se forem diferentes, serão atualizados.

Qual é o papel da chave no Vue?

keyA principal função é 为了更加高效的更新虚拟 DOM.

Quando Vue determina se dois nós são iguais, ele determina principalmente keya soma dos dois 元素类型tag. Portanto, se não estiver definido key, seu valor é indefinido, podendo sempre ser considerado que se trata de dois nós idênticos, e apenas operações de atualização poderão ser realizadas, o que causará um grande número de operações de atualização do DOM.

Por que os dados no componente são uma função?

Em new Vue(), pode ser uma função ou um objeto, pois há apenas uma instância raiz e nenhuma poluição de dados ocorrerá.

Em um componente, os dados devem ser uma função para evitar que vários objetos de instância de componente compartilhem os mesmos dados e causem poluição de dados; na forma de uma função, quando initData é usado como uma função de fábrica, um novo objeto de dados será retornado .

Como se comunicar entre componentes no Vue?

1. Comunicação entre componentes pai-filho: o pai passa dados para o filho propse o filho transmite dados para o pai $emitacionando eventos; a comunicação também pode ser feita através da cadeia pai/cadeia filho ( $parent/ $children); refinstâncias de componentes também podem ser acessadas ; provide/ inject; $attrs/ $listeners. 2. Comunicação de componentes Brother: barramento de eventos globais EventBus. 3. Comunicação de Vuexcomponentes entre níveis: barramento de eventos globais EventBus,, / . ### Qual é a diferença entre v-show e v-if?Vuexprovideinject

1. Diferentes métodos de controle. v-showAo adicionar atributos css ao elemento display: none, o elemento ainda existe; enquanto v-ifcontrolar a exibição ou ocultação do elemento é adicionando ou excluindo o elemento inteiro.
2. O processo de compilação é diferente. v-ifHá um processo parcial de compilação/desinstalação para comutação. Durante o processo de comutação, os ouvintes e subcomponentes de eventos internos são devidamente destruídos e reconstruídos; é apenas uma v-showsimples troca baseada em CSS.
3. As condições de compilação são diferentes. v-ifÉ uma renderização condicional verdadeira. Ela garantirá que os ouvintes de eventos e subcomponentes dentro do bloco condicional sejam devidamente destruídos e reconstruídos durante o processo de comutação. Quando a condição de renderização for falsa, nenhuma operação será executada até que seja verdadeira.
4. O ciclo de vida do gatilho é diferente. v-showAo mudar de falso para verdadeiro, o ciclo de vida do componente não será acionado; ao v-ifmudar de falso para verdadeiro, os ganchos do componente serão acionados, e ao beforeCreatemudar de verdadeiro para falso, os ganchos do componente serão acionados . 5. O consumo de desempenho é diferente. Há um custo de troca mais alto; há um custo de renderização inicial mais alto.createdbeforeMountmountedbeforeDestorydestoryed
v-ifv-show

Cenário de uso: Se você precisar alternar com muita frequência, é v-showmelhor usá-lo, como: menu acordeão, página de guias, etc.; se as condições raramente mudam durante o tempo de execução, é v-ifmelhor usá-lo, como: após o login do usuário, exibição de acordo com diferentes permissões Conteúdo diferente.

Qual é a diferença entre computado e relógio?

• computedAs propriedades calculadas dependem de outras propriedades para calcular valores. Qualquer alteração em qualquer dependência interna executará novamente a função. As propriedades calculadas têm um cache. Quando as propriedades calculadas são reutilizadas várias vezes, o valor de retorno será obtido do cache. O valor calculado propriedades devem ter palavras-chave return.
• watchDetecte alterações em determinados dados para acionar a função. Quando os dados são de um tipo de objeto, você precisa usar o deepatributo de escuta profunda quando o valor do atributo no objeto muda ou pode usar o atributo de escuta imediata quando a página é carregada pela primeira vez immdiate.

Cenários de uso: As propriedades computadas são geralmente usadas na renderização do modelo. Um determinado valor depende de outros objetos de resposta ou mesmo de propriedades calculadas; as propriedades de escuta são adequadas para observar alterações em um determinado valor para completar uma lógica de negócios complexa.

Por que v-if e v-for não são recomendados para serem usados ​​juntos?

No Vue 2, v-fora taxa de prioridade v-ifé maior , o que significa que v-ifserá executado separadamente em cada v-forloop. Se a matriz a ser percorrida for grande e os dados reais a serem exibidos forem muito pequenos, isso causará um enorme desperdício de desempenho.

No Vue 3 é exatamente o contrário, v-ifcom prioridade maior v-for, então v-ifquando executada a variável que ele chama ainda não existe, o que causará uma exceção.

Geralmente há duas situações que levam a isso:

• Para filtrar itens em uma lista, por exemplo: v-for = "user in users" v-if = "user.active". Neste caso, você pode definir uma propriedade calculada e deixá-la retornar a lista filtrada.
• Para evitar renderizar uma lista que deveria estar oculta, v-for = "user in users" v-if = "showUsersFlag"por ex. Nesse caso, você pode v-ifmovê-lo para o elemento contêiner ou envolvê-lo com uma camada externa template.

definir método no Vue 2?

setÉ uma API global em Vue 2 . Os dados responsivos podem ser adicionados manualmente para resolver o problema de as visualizações de alteração de dados não serem atualizadas. Ao definir diretamente o valor de um item na matriz ou definir diretamente o valor de uma propriedade do objeto no projeto, você descobrirá que a página não é atualizada. Isso se deve Object.defineProperty()à limitação de que as alterações de dados não podem ser monitoradas, o que pode ser this.$set(数组或对象，数组下标或对象的属性名，更新后的值)resolvido.

O que é manter vivo?

• Função: Implementar cache de componentes, manter o status dos componentes e evitar problemas de desempenho causados ​​por renderizações repetidas.
• Princípio de funcionamento: Vue.js abstrai internamente os nós DOM em nós VNode, e keep-aliveo cache de componentes também é baseado em nós VNode. Ele armazena em cache os componentes que atendem às condições do objeto de cache e, ao renderizar novamente, o nó VNode é retirado do objeto de cache e renderizado.
• Os seguintes atributos podem ser definidos: ① include: String ou expressão regular. Somente componentes com nomes correspondentes serão armazenados em cache. ② exclude: String ou expressão regular, qualquer componente com um nome correspondente não será armazenado em cache. ③ max: Número, o número máximo de instâncias de componentes que podem ser armazenadas em cache. A correspondência primeiro verifica as opções do componente name. Se namea opção não estiver disponível, ela corresponde ao seu nome de registro local (o valor-chave da opção de componentes do componente pai). Componentes anônimos não podem ser correspondidos.

Os componentes com cache configurado keep-aliveterão mais dois ganchos de ciclo de vida: activated, deactivated. Ao entrar no componente pela primeira vez: beforeCreate --> criado --> beforeMount --> montado --> ativado --> beforeUpdate --> atualizado --> desativado Ao entrar novamente no componente: ativado --> beforeUpdate - -> atualizado --> desativado

mixando

mixin(Mixin), que fornece uma maneira muito flexível de distribuir funcionalidades reutilizáveis ​​em componentes Vue.

Cenários de uso: Alguns códigos idênticos ou semelhantes são frequentemente usados ​​em componentes diferentes e as funções desses códigos são relativamente independentes. O mesmo código ou semelhante pode ser extraído por meio de mixins.

deficiência:

1. A fonte das variáveis ​​não é clara.
2. Múltiplos mixins podem causar conflitos de nomenclatura (solução: API de combinação do Vue 3).
3. Existe um relacionamento muitos-para-muitos entre mixins e componentes, tornando o projeto mais complexo.

slot

slotSlots geralmente são usados ​​dentro de componentes. Ao encapsular um componente, se você não tiver certeza de qual forma de elemento é exibida na posição dentro do componente, você pode ocupar slotesta posição. O elemento nesta posição precisa ser passado na forma de conteúdo do componente pai. slotDividido em:

• 默认插槽: O subcomponente usa <slot>tags para determinar a posição de renderização. As estruturas podem ser colocadas em tags DOMcomo conteúdo de backup. Quando o componente pai está em uso, o conteúdo pode ser escrito diretamente na tag do subcomponente. Esta parte do conteúdo será inserida no <slot>posição da tag do subcomponente. Se o componente pai for usado sem passar conteúdo para o slot, o conteúdo de apoio será exibido na página.
• 具名插槽: O subcomponente usa nameatributos para representar o nome do slot. Se não houver um nameslot especificado, haverá um nome implícito default. Quando usada no componente pai, v-slota diretiva especifica em qual slot o elemento precisa ser colocado com base no slot padrão, e o valor é o valor do atributo slot v-slotdo componente filho . nameO uso v-slotde instruções para especificar em qual slot um elemento deve ser colocado deve corresponder <template>ao elemento, e um <template>elemento só pode corresponder a um slot reservado, ou seja, vários <template>elementos não podem usar v-slotinstruções para especificar o mesmo slot. v-slotA abreviatura de é #, por exemplo, v-slot:headerpode ser abreviada como #header.
• 作用域插槽: o subcomponente <slot>vincula propsdados no rótulo para passar os dados do subcomponente ao componente pai para uso. O método para o componente pai obter os dados de adereços vinculados ao slot: 1. escopo = "nome da variável recebida": <template scope="接收的变量名">2. slot-scope = "nome da variável recebida": <template slot-scope="接收的变量名">3.v-slot: nome do slot = "nome da variável recebida" ":<template v-slot:插槽名="接收的变量名">

Quais são os modificadores no Vue?

No Vue, os modificadores lidam com muitos detalhes dos eventos DOM, de modo que não precisamos mais gastar muito tempo lidando com essas coisas problemáticas e podemos ter mais energia para nos concentrar no processamento lógico do programa. Os modificadores no Vue são divididos nos seguintes tipos:

1. Modificador de formulário lazyApós o preenchimento das informações, o valor será atribuído a valor somente quando o cursor sair do rótulo, ou seja, changeas informações serão sincronizadas após o evento. numberConverte automaticamente o valor de entrada do usuário em tipo numérico, mas se o valor não puder ser parseFloatanalisado, o valor original será retornado. trimFiltre automaticamente o primeiro e o último espaço inserido pelo usuário, mas os espaços do meio não serão filtrados.
2. O modificador de evento stopevita que o evento borbulhe, o que equivale a chamar event.stopPropagationum método. preventPrevenir o comportamento padrão do evento equivale a chamar event.preventDefaulto método. selfA função manipuladora só é event.targetacionada quando o próprio elemento atual. onceApós vincular o evento, ele só poderá ser acionado uma vez e não será acionado na segunda vez. captureUse o modo de captura de eventos, ou seja, os eventos acionados pelo próprio elemento são processados ​​​​primeiro aqui e depois entregues aos elementos internos para processamento. passiveDiga ao navegador que você não deseja bloquear o comportamento padrão do evento. Deixe o componente ouvir os eventos nativos do elemento raiz nativecomo a tag integrada, caso contrário, o componente ouvirá apenas os eventos personalizados. 3. Modificador do botão do mouse , clique com o botão esquerdo. clique com o botão direito. Clique com o meio. 4. Modificadores de valor de chave Os modificadores de teclado são usados ​​para modificar eventos de teclado ( , ), como segue: Existem muitos, mas eles nos fornecem aliases, que são divididos nos dois tipos a seguir: * Teclas comuns (enter, tab, delete, space , esc, up...) * Teclas modificadoras do sistema (ctrl, alt, meta, shift...)htmlv-onleftrightmiddleonkeyuponkeydownkeyCodevue

Qual é o seu entendimento sobre SPA?

1. Conceito: SPA（Single-page application）, ou seja, aplicativo de página única, que é um modelo de aplicativo de rede ou site que interage com os usuários reescrevendo dinamicamente a página atual. Esse método evita interromper a experiência do usuário ao alternar entre as páginas. No SPA, todo o código necessário (HTML, JavaScript e CSS) é recuperado com o carregamento de uma única página, ou os recursos apropriados são carregados dinamicamente e adicionados à página conforme necessário (geralmente em resposta às ações do usuário). A página não é recarregada em nenhum momento, nem controla a transferência para outras páginas. Por exemplo, assim como uma xícara, contém leite pela manhã, café ao meio-dia e chá à tarde, sempre tem o conteúdo e a xícara permanece inalterada. 2. A diferença SPAentre MPA: MPA（Muti-page application）, ou seja, aplicativos de várias páginas. No MPA, cada página é uma página principal e é independente. Sempre que uma página é acessada, os arquivos HTML, CSS e JS precisam ser recarregados, e os arquivos públicos são carregados sob demanda de acordo com a necessidade. || SPA | MPA || — | — | — || Composição | Uma página principal e vários fragmentos de página | Várias páginas principais || modo url | modo hash | modo histórico || Otimização de mecanismo de pesquisa SEO | Difícil de alcançar, mas possível Use o método SSR para melhorar | Fácil de implementar | | Transferência de dados | Fácil | Passado por url, cookie, localStorage, etc. | | Troca de página | Velocidade rápida, boa experiência do usuário | Troca de recursos de carregamento, velocidade lenta, experiência ruim do usuário | | Custo de manutenção | Relativamente fácil | Relativamente complexo | 3. SPAVantagens e Desvantagens: Vantagens: * Possui imediatismo de aplicativos desktop, portabilidade e acessibilidade de sites * Experiência do usuário boa e rápida, alterações de conteúdo não exigem recarregamento de toda a página * Bom antes e após a separação ponta a ponta, divisão mais clara do trabalho Desvantagens: * Não propício ao rastreamento do mecanismo de pesquisa * A primeira velocidade de renderização é relativamente lenta ### Ligação bidirecional?

1. Conceito: A ligação bidirecional no Vue é uma instrução v-modelque pode vincular dados responsivos à visualização, e alterações na visualização podem alterar o valor. É um açúcar sintático, que é equivalente a e v-modelpor padrão . Seu uso pode reduzir muito código tedioso de processamento de eventos e melhorar a eficiência do desenvolvimento. 2. Uso: Geralmente usado em itens de formulário e também pode ser usado em componentes personalizados para representar o controle de entrada e saída de um determinado valor. 3. Princípio: É uma instrução. A ligação bidirecional é na verdade concluída pelo compilador Vue. Ao gerar a função de renderização do componente que contém o modelo, é na verdade a ligação de propriedades e monitoramento de eventos. As variáveis ​​​​correspondentes serão feitas no função de retorno de chamada de evento.Operação de atualização.:value@inputv-model
v-model
v-modelv-modelvalueinput

Os componentes filhos podem alterar diretamente os dados dos componentes pais?

1. Tudo propsegue o princípio de ligação única, propsmuda devido à atualização do componente pai e flui naturalmente o novo estado para baixo para o componente filho, sem passá-lo na direção inversa. Isso evita que os componentes filhos modifiquem acidentalmente o estado do componente pai, caso contrário, o fluxo de dados do aplicativo se tornaria facilmente confuso e difícil de entender. Além disso, toda vez que o componente pai for atualizado, todos os componentes filhos propsserão atualizados para os valores mais recentes, o que significa que você não deve modificar um dos componentes filhos prop. Se você fizer isso, o Vue lançará um aviso no console.
2. No processo de desenvolvimento real, geralmente há dois cenários que requerem modificação prop: * propé usado para passar um valor inicial e o subcomponente deseja usá-lo como um atributo de dados local posteriormente. Neste caso, é melhor definir um novo atributo de dados local e propsobter o valor inicial de . prop* É necessária conversão adicional no valor repassado . propÉ melhor definir uma propriedade computada com base neste valor.
3. Na prática, se você realmente deseja alterar as propriedades do componente pai, emitum evento deve ser usado para permitir a alteração do componente pai. Quando um objeto ou array propsé passado como um componente, embora o componente filho não possa alterar propsa ligação, ele ainda pode alterar o valor dentro do objeto ou array. Isso ocorre porque os objetos e arrays JS são passados ​​​​por referência e, para o Vue, embora seja possível proibir tais alterações, isso causará uma enorme perda de desempenho, e o ganho supera o ganho.

Modos e princípios de roteamento comuns no Vue Router?

1. Modo hash: location.hashO valor de * é o que segue # na URL. Sua característica é que embora o hash apareça na URL, ele não será incluído na solicitação HTTP e não terá nenhum impacto no backend, portanto, alterar o hash não recarregará a página.

• Você pode adicionar eventos de escuta para alterações de hash window.addEventListener("hashchange", funcRef, false). Cada alteração hash (window.location.hash)adicionará um registro ao histórico de acesso do navegador. Usando as características de hash acima, você pode implementar a função de roteamento de front-end para atualizar a visualização sem solicitar novamente a página . Características: Boa compatibilidade, mas não bonita 2. Modo histórico: Use os novos métodos pushState()e replaceState()na interface de histórico HTML5. Esses dois métodos são aplicados à pilha de histórico do navegador e, com base nos back, forward, e , existentes atualmente go, fornecem a função de modificar o registro do histórico. Esses dois métodos têm algo em comum: quando são chamados para modificar a pilha de histórico do navegador, embora o URL atual tenha mudado, o navegador não atualizará a página. Isso significa que o roteamento front-end para aplicativos de página única "atualiza o visualiza, mas não solicita novamente a página." "Fornece recursos básicos: embora seja bonito, 404 aparecerá durante a atualização e requer configuração de back-end.

Roteamento dinâmico?

Muitas vezes precisamos mapear rotas para um determinado padrão de correspondência para o mesmo componente. Neste caso, precisamos definir o roteamento dinâmico. Por exemplo, temos um componente User, que deve ser usado para renderizar todos os usuários com IDs diferentes. Então, podemos usá-lo no caminho de roteamento do vue-router 动态路径参数（dynamic segment）para obter este efeito: {path: '/user/:id', compenent: User}, que :idé o parâmetro do caminho dinâmico.

Entendendo o Vuex?

1. Conceito: Vuex é uma biblioteca de gerenciamento de estado dedicada ao Vue, que gerencia centralmente o estado do aplicativo de maneira global e usa regras correspondentes para garantir que o estado mude de forma previsível. 2. Problemas resolvidos: O principal problema que o Vuex resolve é o compartilhamento de estado entre vários componentes. Embora o compartilhamento de estado também possa ser alcançado usando vários métodos de comunicação, muitas vezes é necessário manter a consistência do estado entre vários componentes.Este modelo está sujeito a problemas e complica a lógica do programa. Vuex extrai o estado compartilhado dos componentes e o gerencia em um modo singleton global, para que qualquer componente possa obter e modificar o estado de maneira consistente. Os dados responsivos também podem garantir um fluxo unidirecional simples, tornando o código mais eficiente. Estruturado e de fácil manutenção. 3. Quando usar: Vuex não é necessário, ele pode gerenciar estados, mas também traz mais conceitos e frameworks. Se não planejamos desenvolver um grande aplicativo de página única ou não há uma grande quantidade de estado global para manter no aplicativo, não há necessidade de usar o Vuex. Um modo de armazenamento simples é suficiente. Caso contrário, a Vuex seria a escolha natural.
4. Uso: Vuex coloca o estado global no stateobjeto, que em si é uma árvore de estados. O componente usa storeinstâncias para stateacessar esses estados, depois usa mutationmétodos de suporte para modificar esses estados e só pode mutationmodificar o estado e chamá-lo no componente . commitEnvio de métodos mutation; se houver operações assíncronas ou combinações lógicas complexas na aplicação, elas precisam ser escritas action. Após a execução, se houver modificações de estado, elas ainda precisam ser enviadas mutatione os componentes são dispatchdespachados action. Finalmente, a modularização é usada para modulesorganizar os submódulos divididos por meio de opções. Ao acessar o estado, você precisa prestar atenção ao adicionar o nome do submódulo. Se o submódulo tiver configurações, prefixos de namespace adicionais serão necessários ao namespaceenviar mutatione despacho .action

Como resolver o problema de perda de estado do Vuex após a atualização da página?

Vuex salva apenas o estado na memória e ele será perdido após a atualização. Se quiser persistir, você precisa salvá-lo.

localStorageÉ muito adequado, mutationpode ser salvo ao mesmo tempo no envio localStoragee storeo valor pode ser retirado como statevalor inicial.

Você também pode usar plug-ins de terceiros. É recomendado o uso de vuex-persistplug-ins. É um plug-in para armazenamento persistente Vuex. Não requer acesso manual storage, mas salva diretamente o estado em cookieou localStorage.

Você entende o Vue SSR?

SSROu 服务端渲染（Server Side Render）seja, o trabalho de renderização de tags Vue em HTML no cliente é feito no servidor e, em seguida, o HTML é retornado diretamente ao cliente.

• Vantagens: Melhor SEO e a primeira tela carrega mais rápido.
• Desvantagens: As condições de desenvolvimento serão limitadas. A renderização do lado do servidor suporta apenas dois ganchos, beforeCreate e criado. Quando precisamos de algumas bibliotecas de extensão externas, é necessário um processamento especial. Os aplicativos de renderização do lado do servidor também precisam estar no ambiente de execução Node.js. . O servidor terá maiores requisitos de carga.

Quais métodos de otimização de desempenho você conhece sobre o Vue?

• As rotas são carregadas lentamente. Divida efetivamente o tamanho do aplicativo e carregue-o de forma assíncrona quando acessado.
• keep-aliveArmazene a página em cache. Evite a criação duplicada de instâncias de componentes e mantenha o estado do componente em cache.
• v-forTraversal evita o uso simultâneo v-if. Na verdade, já é um uso errado no Vue 3.
• Otimização de desempenho de lista longa, lista virtual pode ser usada.
• v-once. Uso de dados que não muda mais v-once.
• O evento é destruído. Depois que o componente é destruído, as variáveis ​​globais e os temporizadores são destruídos.
• As fotos são carregadas lentamente.
• Plug-ins de terceiros são introduzidos sob demanda.
• Divisão de subcomponentes. Componentes de estado mais pesados ​​são adequados para divisão.
• Renderização do lado do servidor.

afinal

Preparamos um pacote de informações iniciais para todos. Contém 54 e-books relacionados ao front-end 2.57G, "Guia de entrevista de front-end (com respostas e análises)", tutoriais em vídeo sobre conhecimentos difíceis e importantes (conjunto completo).



Amigos necessitados podem clicar no cartão abaixo para recebê-lo e compartilhá-lo gratuitamente