5

Pelo que vi, utilizando o v-if é possível mostrar e esconder um elemento através de uma condição, porém ele não funciona como um toggle do Jquery, o v-if acaba removendo o elemento e consegue devolver o mesmo elemento dependendo da condição.

Imagino que seja algo como clonar um elemento, utilizar o .remove() e depois um .append() do elemento original.

Como isso é feito? Como seria fazer a mesma coisa com js puro ou jquery?

2
  • O v-if é algo condicional?
    – gato
    Commented 30/08/2017 às 1:05
  • é uma diretiva do vue.js, eu queria entender o funcionamento interno dela :P
    – haykou
    Commented 30/08/2017 às 1:09

1 Resposta 1

4

O vue.js utiliza abordagem do Virtual DOM. Este metódo implica em alterar primeiramente na memória, fazer o diff do que vai ser alterado na tela e somente depois, alterar o DOM. Esta técnica tem em média 95~96% de eficiência em questão de desempenho.

O v-if remove o nó do DOM, seria mesmo um remove normal do javascript. Trecho de código do vue.js onde é executada a chamada de removeChild e logo abaixo, a declarão da função removeChild que utiliza o recurso nativo do javascript:

  addClass(clone, moveClass);
  clone.style.display = 'none';
  this.$el.appendChild(clone);
  var info = getTransitionInfo(clone);
  this.$el.removeChild(clone);
  return (this._hasMove = info.hasTransform)

Funções que utilizam recursos nativos do javascript:

/*...*/
function removeChild (node, child) {
  node.removeChild(child);
}

function appendChild (node, child) {
  node.appendChild(child);
}
/*...*/

Além do v-if, temos também o v-show. Este funciona como o toggle do jQuery. O v-show apenas muda o valor de "display" para none. Para requisitos de perfomance, vale a pena utilizar o v-show, mas dependendo dos casos, você pode utilizar um v-if. Exemplo onde pode ser haver muito custo de processamento em questão de v-if e v-show, seria uma renderição de uma tabela com 1000 itens. Com o v-show ficaria bem mais leve, mas em situações normais, o desempenho entre eles é praticamente igual.

Um detalhe importante, caso você tenha um component dentro de um v-if, toda vez que há a mudança de estado de oculto para visível, o component é novamente instânciado. Com o v-show o component não muda o estado, sendo carregado apenas uma vez.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .