Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

162
Visualizações
How Virtual DOM works in React or Vue

I m a student and I m trying to create own Virtual DOM for my college project ( It will not have any advanced feature like props or events, I will keep it simple ) in JavaScript like other famous frameworks React, Vue and other.

I just want to know that when we have multiple file of code( code splitting ). If I make a change in any deep child than do I need to compare complete virtual DOM (including all child and parent element) or I just need to compare only that child elements.

If I have to compare complete new virtual DOM ( including all children ) with previous Virtual DOM. Then Why should I care re-rendering in React or Vue ( because any changes in child will force the framework to compare complete Virtual DOM )

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

For Vue, The working of virtual DOM differs in vue2 and vue3.

The way vue3 does it, is,

  1. By parsing the HTML template or render function from the component files and converting it to a Virtual Node representation.
  2. While doing the parsing, it records the nodes that have a dependency on dynamic data.
  3. Something like below
dynamicData = {
    data1: [ effect1, effect2, ... ],
    data2: [ effect4, effect5, ... ],
    ... }
  1. Effects are functions that define computations required to resolve certain data values.
  2. Effects also include render function for the Virtual nodes
  3. Render functions smartly converts virtual nodes to DOM elements
  4. Now whenever data1 changes Vue3 re-executes the corresponding effects and triggers update for subsequent data changes.

References:

  1. Vue3 Reactivity
  2. Vnode Transformation
about 4 years ago · Juan Pablo Isaza Relatório

0

Answer to your last point as I infer from my experience of React is that comparing Virtual DOM's in Javascript is the thing that helps react know what things it has to re-render on the actual DOM, So the "re-rendering" is the hard part on which the performance of the APP takes the hit. Hopefully, this would help.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda