perguntas da entrevista do dia 08

1. Você entende o algoritmo diff do Vue? Diga-me

Sim, eu entendo o algoritmo Diff do Vue.

No Vue, o algoritmo Diff é um processo usado para comparar e atualizar o DOM virtual (Virtual DOM). Quando os dados mudam, o Vue irá construir uma nova árvore DOM virtual e compará-la com a antiga árvore DOM virtual, então descobrir as partes que precisam ser atualizadas e aplicar essas alterações ao DOM real para melhorar a eficiência de renderização da página.

O algoritmo Diff segue as seguintes etapas:

1. Comparação de nós antigos e novos: o Vue comparará os nós das árvores DOM virtuais novas e antigas, um por um. Primeiro, os tipos de nós serão comparados. Se forem diferentes, todo o nó e seus subnós serão substituídos diretamente. Se os tipos forem iguais, os atributos e eventos do nó continuarão a ser comparados.

2. Atualizar nós filhos: se o nó tiver nós filhos, os nós filhos serão comparados e atualizados recursivamente. Durante este processo, o Vue usará alguns métodos heurísticos, como comparação dupla, comparação entre pares, etc., para minimizar o número de comparações.

3. Otimização da renderização de lista: No caso de renderização de lista (v-for), o Vue adicionará um atributo de chave exclusivo a cada item da lista para descobrir com mais precisão os nós recém-adicionados, excluídos e movidos e reduzir o tempo de operação do real DOM.frequência.

4. Atualizar o DOM real: Após concluir a comparação e atualização, o Vue aplicará as modificações aos elementos DOM reais com base no registro de alteração para atualizar a exibição da página.

O algoritmo Diff do Vue pode aplicar alterações à página com eficiência, evitar o redesenho desnecessário de partes que não precisam ser modificadas e melhorar o desempenho de renderização da página. No entanto, como o algoritmo Diff precisa ser comparado sempre que os dados mudam, você ainda precisa prestar atenção à otimização do desempenho ao lidar com listas grandes ou árvores de componentes complexas.

2. Por que você precisa do Virtual Dom

Virtual DOM é um conceito introduzido para melhorar o desempenho e a eficiência de desenvolvimento de aplicações web.

No desenvolvimento front-end tradicional, quando os dados mudam, precisamos operar diretamente o DOM real para atualizar a página. Existem alguns problemas com esta abordagem:

1. Problemas de desempenho: operar diretamente o DOM real envolverá um grande número de operações de redesenho e refluxo, o que consome muito desempenho. As operações frequentes do DOM farão com que a resposta da página fique mais lenta e afetem a experiência do usuário.

2. Alta complexidade de desenvolvimento: operar diretamente o DOM real requer escrever uma grande quantidade de código de operação DOM, incluindo operações como criação, atualização e exclusão. Para lógica de interação complexa e alterações na interface do usuário, a manutenção e a depuração do código se tornarão difíceis.

Portanto, a introdução do Virtual DOM resolve estes problemas:

1. Desempenho aprimorado: o DOM virtual existe na memória como uma árvore de objetos JavaScript leve, que pode comparar e calcular diferenças com eficiência. Ao comparar as diferenças entre as antigas e novas árvores Virtual DOM, apenas as partes que realmente foram alteradas precisam ser operadas, reduzindo o acesso e as operações frequentes ao DOM real, melhorando assim o desempenho.

2. Simplifique o desenvolvimento: o uso do Virtual DOM pode mudar o foco do desenvolvedor das operações DOM de baixo nível para componentes e dados de nível superior. Os desenvolvedores só precisam se concentrar no processamento de dados e nas alterações de status. O Virtual DOM será responsável por calcular automaticamente as partes que precisam ser atualizadas com base nas alterações de dados e renderizá-las de forma eficiente.

3. Capacidades multiplataforma: Como o Virtual DOM é independente de plataforma, ele pode ser usado em diferentes mecanismos de renderização. Isso permite que os desenvolvedores usem Vue, React e outras estruturas para desenvolvimento de aplicativos web, móveis e desktop para obter reutilização de código e recursos de plataforma cruzada.

Resumindo, ao introduzir o Virtual DOM, podemos processar e atualizar páginas de forma mais eficiente e concisa, melhorando o desempenho e a eficiência de desenvolvimento de aplicações web.

3.Quais são os objetivos de design do Vue3.0? Quais otimizações foram feitas?

Os objetivos de design do Vue 3.0 incluem:

1. Melhor desempenho: o Vue 3.0 fez uma série de otimizações em termos de desempenho, incluindo o uso de Proxy em vez de Object.defineProperty para fornecer um sistema responsivo mais eficiente; otimizou a renderização do DOM virtual, reduzindo operações desnecessárias e redundância.

2. Tamanho menor: Vue 3.0 passou por uma reconstrução modular e oferece muitas funções como pacotes independentes opcionais, permitindo que os desenvolvedores selecionem livremente as funções necessárias de acordo com suas necessidades, reduzindo assim o tamanho da biblioteca.

3. Melhor suporte a TypeScript: Vue 3.0 foi reescrito em TypeScript e fornece um arquivo completo de definição de tipo. Isso torna mais fácil detectar possíveis erros durante o desenvolvimento e fornece melhor inteligência e verificações em tempo de compilação.

4. Melhor experiência de desenvolvimento: Vue 3.0 introduz alguns novos recursos e açúcar sintático, como API de composição e algumas novas instruções, para ajudar os desenvolvedores a organizar e reutilizar melhor o código lógico, melhorando a eficiência do desenvolvimento e a capacidade de manutenção do código.

5. Melhor escalabilidade: o Vue 3.0 pega emprestada uma ideia do React e introduz o conceito de Fragmentos, permitindo que os componentes retornem vários nós raiz, melhorando a flexibilidade e a reutilização dos componentes.

6. Melhor suporte ao conjunto de ferramentas de construção: o Vue 3.0 é melhor integrado com ferramentas e ecossistemas de construção front-end modernos, ao mesmo tempo que oferece suporte ao Vue CLI para construção, desenvolvimento e empacotamento de projetos.

Essas otimizações e melhorias melhoraram significativamente o Vue 3.0 em termos de desempenho, volume, experiência de desenvolvimento e escalabilidade, proporcionando aos desenvolvedores uma melhor experiência de uso e desenvolvimento.

4. Qual é a diferença entre a API de composição usada pelo Vue3.0 e a API de opções usada pelo Vue2.x?

A API de composição do Vue 3 e a API de opções do Vue 2 são dois métodos diferentes de design de componentes. Eles têm algumas diferenças na organização do código e na reutilização da lógica.

1. Como organizar o código: A API de opções organiza o código com base em objetos de opções, colocando as propriedades, ganchos de ciclo de vida e métodos em componentes em um grande objeto de opções. A API Composition organiza o código por meio de funções e encapsula o código lógico relevante em uma única função, tornando a lógica mais clara e reutilizável.

2. Método de reutilização lógica: a API de opções usa mixins para conseguir a reutilização de código, mas isso levará a conflitos de nomenclatura e dificuldade de rastreamento. A API Composition usa a função hooks para combinar e reutilizar a lógica de maneira mais flexível, melhorando a legibilidade e a manutenção do código.

3. Sistema reativo: Na API de opções, os dados reativos precisam ser declarados na opção data e acessados ​​usando a palavra-chave this. Na API Composition, você pode utilizar a função reativa para criar dados responsivos e acessá-los diretamente dentro da função, evitando o problema apontado por isso.

4. Ganchos de ciclo de vida: funções específicas de gancho de ciclo de vida são usadas na API de opções para manipular eventos de ciclo de vida de componentes. Na API Composition, você pode usar a função onXXX para escutar eventos específicos do ciclo de vida.

Em geral, a API Composition é mais flexível e combinável, permitindo que a lógica dos componentes seja melhor separada e reutilizada. Pode ajudar os desenvolvedores a organizar o código de forma mais clara e melhorar a legibilidade e a manutenção do código. A API Options é a API usada principalmente na versão Vue 2.x. Ainda é uma escolha eficaz e viável para pequenos projetos ou desenvolvedores que estão familiarizados com a API Options.

5. Vamos falar sobre o princípio da capacidade de resposta dos dados Vue

O princípio reativo do Vue é realizado através do sequestro de dados e do modo observador no Vue. Especificamente, inclui as seguintes etapas principais:

1. Object.definePropertySequestro de dados: Vue sequestra objetos de dados usando métodos para adicionar getters e setters para cada propriedade. Quando uma propriedade é acessada, um getter é acionado para coleta de dependências; quando uma propriedade é modificada, um setter é acionado para notificar dependências para atualização.

2. Coleta de dependências: Quando o componente encontra dados responsivos durante a renderização, um relacionamento de dependência será estabelecido e o objeto observador (Watcher) será adicionado à lista de dependências. As dependências podem ser coletadas no getter e armazenadas no objeto observador correspondente.

3. Atualização de dependência: quando os dados responsivos mudam, o setter será acionado e todos os objetos observadores dependentes serão notificados para atualização. As atualizações podem causar nova renderização ou realizar outras operações relacionadas.

4. Padrão observador: Vue usa o padrão observador para implementar a coleta e atualização de dependências. As funções principais são Dep (dependência) e Watcher (observador). Dep é usado para gerenciar dependências. Vários observadores podem depender do mesmo Dep, e um observador pode depender de vários Dep. Watcher é uma dependência específica que recebe notificações quando os dados são alterados e executa as operações de atualização correspondentes.

Através das etapas acima, o Vue implementa vinculação de dados responsiva. Quando os dados mudam, as visualizações relacionadas são atualizadas automaticamente, conseguindo a sincronização de dados e visualizações. Isso permite que os desenvolvedores escrevam código de maneira declarativa sem precisar atualizar manualmente o DOM, melhorando a eficiência do desenvolvimento e a capacidade de manutenção do código.

6. Conte-me sobre sua compreensão do React? Quais são os recursos?

React é uma biblioteca JavaScript para construção de interfaces de usuário. Ele se concentra na construção de componentes de UI reutilizáveis ​​e eficientes e fornece um modelo de programação declarativo.

A seguir estão os principais recursos do React:

1. Componentização: React incentiva a divisão da UI em componentes independentes e reutilizáveis. Essa abordagem de desenvolvimento baseada em componentes torna o código mais fácil de entender, testar e manter. Os componentes podem ser aninhados e combinados entre si para formar interfaces complexas.

2. Modelo de programação declarativa: React usa uma abordagem declarativa para descrever a interface do usuário. Os desenvolvedores só precisam definir o estado desejado da UI e não precisam se concentrar em como operar o DOM para atualizações. O React atualizará automaticamente a visualização correspondente de acordo com as mudanças no estado, simplificando as operações do DOM e o gerenciamento manual do estado.

3. DOM virtual: React usa DOM virtual para atualizações eficientes da interface do usuário. Ele abstrai toda a estrutura da UI em uma árvore DOM virtual na memória. Quando os dados mudam, ele determina as partes que precisam ser atualizadas comparando as árvores DOM virtuais antigas e novas e, em seguida, executa operações DOM em lotes, reduzindo o número de operações diretas. operações no DOM real e melhorando o desempenho.

4. Fluxo de dados unidirecional: React implementa fluxo de dados unidirecional (One-Way Data Binding). O componente pai pode passar dados para o componente filho por meio de adereços. O componente filho não pode modificar diretamente os dados do componente pai. Em vez disso, ele notifica o componente pai para atualizar seu status chamando uma função de retorno de chamada. Esse design de fluxo de dados torna o fluxo de dados entre componentes mais controlável e previsível.

5. Métodos de ciclo de vida: os componentes React possuem uma série de métodos de ciclo de vida que podem realizar operações específicas em diferentes estágios do componente. Os desenvolvedores podem usar esses métodos para gerenciar o estado dos componentes, realizar operações assíncronas, otimizar o desempenho, etc.

6. Sintaxe JSX: React usa JSX (JavaScript XML) como linguagem de modelo para componentes. JSX permite que os desenvolvedores escrevam código semelhante a HTML diretamente em JavaScript para descrever a estrutura da UI e o relacionamento entre os componentes. JSX é convertido em código JavaScript puro através de ferramentas de compilação, obtendo um método de construção de interface altamente flexível e extensível.

O texto acima é meu entendimento do React e uma breve introdução aos seus principais recursos. Como uma estrutura de front-end popular e popular, o React possui um ecossistema forte e uma ampla variedade de cenários de aplicativos e desempenha um papel importante na construção de aplicativos da web modernos.