One place for hosting & domains

      Compreendendo os ganchos de ciclo de vida do Vue.js


      Introdução

      Ganchos de ciclo de vida são uma janela para ver como a biblioteca que você está usando funciona nos bastidores. Os ganchos de ciclo de vida permitem saber quando seu componente é criado, adicionado ao DOM, atualizado ou destruído.

      Este diagrama da documentação oficial do Vue.js captura o Ciclo de vida da instância Vue.js:

      Diagrama de ciclo de vida da instância Vue.js

      Este artigo irá apresentar-lhe os ganchos de criação, montagem, atualização e destruição.

      Compreendendo os ganchos de criação (inicialização)

      Os ganchos de criação são os primeiros ganchos que são executados em seu componente. Eles permitem que você execute ações antes mesmo do seu componente ser adicionado ao DOM. Ao contrário de qualquer um dos outros ganchos, os ganchos de criação também são executados durante a renderização do servidor.

      Use os ganchos de criação se for necessário configurar coisas em seu componente, tanto durante a renderização do cliente quanto na renderização do servidor.

      Você não terá acesso ao DOM ou ao elemento de montagem alvo (this.$el) dentro dos ganchos de criação.

      beforeCreate

      O hook beforeCreate é executado no momento da inicialização do seu componente. data (dados), que ainda não estão reativos, e os events (eventos) ainda não foram configurados:

      ExampleComponent.vue

      <script>
      export default {
        beforeCreate() {
          console.log('At this point, events and lifecycle have been initialized.')
        }
      }
      </script>
      

      Neste exemplo, quando o hook beforeCreate é executado, esse trecho irá registrar a mensagem: At this point, events and lifecycle have been initialized..

      created

      Você é capaz de acessar data e events reativos que estão ativos com o gancho created. Os modelos e o DOM virtual ainda não foram montados nem renderizados:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{ propertyComputed }}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            property: 'Example property.'
          }
        },
      
        computed: {
          propertyComputed() {
            return this.property
          }
        },
      
        created() {
          console.log('At this point, this.property is now reactive and propertyComputed will update.')
          this.property = 'Example property updated.'
        }
      }
      </script>
      

      Neste exemplo, o trecho de código irá armazenar property como Example property. Quando o gancho created é executado, uma mensagem de At this point, this.property is now reactive and propertyComputed will update. será registrado e, em seguida, property é alterada para Example property updated.

      Mais tarde no ciclo de vida, {{ propertyComputed }} irá aparecer como Example property updated em vez de Example property.

      Neste passo, você revisou alguns exemplos de ganchos de criação e está pronto para seguir em frente para a próxima parte do ciclo de vida, os ganchos de montagem.

      Compreendendo os hooks de montagem (Inserção DOM)

      Os ganchos de montagem são frequentemente os ganchos mais usados. Eles permitem que você acesse seu componente imediatamente antes e depois da primeira renderização. No entanto, eles não são executados durante a renderização do servidor.

      Use os ganchos de montagem caso seja necessário acessar ou modificar o DOM do seu componente imediatamente antes ou após a renderização inicial.

      Não use os ganchos de montagem se for necessário buscar alguns dados para o seu componente na inicialização.

      Nota: use created (ou created e activated para os componentes keep-alive) para isso. Especialmente se precisar desses dados durante a renderização do servidor.

      beforeMount

      O gancho beforeMount é executado imediatamente antes da renderização inicial acontecer e depois que o modelo ou funções de renderização forem compilados:

      ExampleComponent.vue

      <script>
      export default {
        beforeMount() {
          console.log(`At this point, vm.$el has not been created yet.`)
        }
      }
      </script>
      

      Neste exemplo, quando o hook beforeMount é executado, esse trecho irá registrar a mensagem: At this point, vm.$el has not been created yet..

      mounted

      No gancho mounted, você terá acesso completo ao componente reativo, modelos e DOM renderizado (via this.$el).

      Use o mounted para modificar o DOM — particularmente ao integrar as bibliotecas que não forem Vue:

      ExampleComponent.vue

      <template>
        <div ref="example-element">Example component.</div>
      </template>
      
      <script>
      export default {
        mounted() {
          console.log(`At this point, vm.$el has been created and el has been replaced.`);
          console.log(this.$el.textContent) // Example component.
        }
      }
      </script>
      

      Neste exemplo, quando o gancho mounted é executado, esse trecho irá registrar a mensagem At this point, vm.$el has been created and el has been replaced.. Além disso, uma mensagem de Example content. (this.$el.textContent) será registrada.

      Nessa seção, você explorou os casos de uso para os hooks de montagem. No próximo passo, revisará alguns exemplos que usam ganchos de atualização.

      Compreendendo os ganchos de atualização (Diff & Re-render)

      Ganchos de atualização são chamados sempre que uma propriedade reativa usada pelo seu componente é alterada ou alguma coisa faz com que ela seja re-renderizada. Eles permitem que você use hooks no ciclo watch-compute-render para o seu componente.

      Use os ganchos de atualização se for necessário saber quando o seu componente é re-renderizado. Tavez para depurar ou criação de perfil.

      Não use os ganchos de atualização se precisar saber quando uma propriedade reativa em seu componente é alterada. Em vez disso, use propriedades computadas ou inspetores para isso.

      beforeUpdate

      O gancho beforeUpdate é executado após dados serem alterados em seu componente e o ciclo de atualização começa, logo antes do DOM ser corrigido e re-renderizado.

      Use beforeUpdate se precisar obter o novo estado de qualquer dado reativo em seu componente antes dele ser de fato renderizado:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        beforeUpdate() {
          console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
          // Logs the counter value every second, before the DOM updates.
          console.log(this.counter)
        }
      }
      </script>
      

      Primeiro, esse trecho irá armazenar o counter como 0. Quando o gancho created for executado, ele irá incrementar o counter a cada 1000 ms. Quando o gancho beforeUpdate é executado, esse trecho irá registrar a mensagem: At this point, Virtual DOM has not re-rendered or patched yet. e um número para o counter é registrado.

      updated

      O gancho updated é executado após dados em seu componente sofrerem alteração e o DOM re-renderizar.

      Use updated se precisar acessarr o DOM após uma alteração de propriedade:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        updated() {
          console.log(`At this point, Virtual DOM has re-rendered and patched.`)
          // Fired every second, should always be true
          console.log(+this.$refs['example-element'].textContent === this.counter)
        }
      }
      </script>
      

      Primeiro, esse trecho irá armazenar o counter como 0. Quando o gancho created for executado, ele irá incrementar o counter a cada 1000 ms. Quando o hook updated é executado, esse trecho irá registrar a mensagem: At this point, Virtual DOM has re-rendered and patched. e um valor booleano de true é registrado porque o valor renderizado e o valor atual são iguais.

      Agora que você explorou o uso de ganchos de atualização, está pronto para aprender sobre ganchos de destruição.

      Compreendendo os hooks de destruição (Teardown)

      Os hooks de destruição permitem que você execute ações quando o seu componente é destruído, tais como a limpeza ou a transmissão de análise. Eles são acionados quando o seu componente está sendo destruído e removido do DOM.

      beforeDestroy

      O beforeDestroy é acionado imediatamente antes da destruição. Seu componente ainda estará totalmente presente e funcional.

      Use beforeDestroy se precisar limpar eventos ou assinaturas reativas:

      ExampleComponent.vue

      <script>
      export default {
        data() {
          return {
            exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
          }
        },
      
        beforeDestroy() {
          console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
          // Perform the teardown procedure for exampleLeakyProperty.
          // (In this case, effectively nothing)
          this.exampleLeakyProperty = null
          delete this.exampleLeakyProperty
        }
      }
      </script>
      

      Esse código irá primeiro armazenar o exampleLeakyProperty. Quando o gancho beforeDestroy é executado, esse trecho irá registrar a mensagem At this point, watchers, child components, and event listeners have not been torn down yet. e, em seguida, o exampleLeakyProperty é excluído.

      destroyed

      Ao chegar no hook destroyed, praticamente nada terá sobrado em seu componente. Tudo o que foi anexado a ele foi destruído.

      Use o destroyed se precisar fazer qualquer limpeza de última hora ou informar um servidor remoto que o componente foi destruído:

      ExampleComponent.vue

      <script>
      import ExampleAnalyticsService from './example-analytics-service'
      
      export default {
        destroyed() {
          console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
          console.log(this)
          ExampleAnalyticsService.informService('Component destroyed.')
        }
      }
      </script>
      

      Primeiro, esse trecho irá importar o ExampleAnalyticsService. Quando o gancho beforeDestroy é executado, esse trecho irá registrar a mensagem At this point, watchers, child components, and event listeners have been torn down. O que resta do componente será registrado no console, e o ExampleAnalyticsService receberá a mensagem Component destroyed..

      Com isso, você concluiu sua revisão geral dos ganchos do ciclo de vida do Vue.js.

      Outros hooks

      Existem outros dois ganchos, activated e deactivated. Eles são para os componentes keep-alive, um tópico que está fora do âmbito deste artigo.

      Basta dizer que eles permitem que você detecte quando um componente que está envolvido em uma etiqueta <keep-alive></keep-alive> está ativo ou não. Você pode usá-los para buscar dados para o seu componente ou manipular alterações de estado, fazendo com que sejam semelhantes ao created e beforeDestroy, mas sem a necessidade de fazer uma recompilação completa do componente.

      Conclusão

      Neste artigo, você foi apresentado a diferentes ganchos de ciclo de vida disponíveis na instância de ciclo de vida Vue.js. Você explorou os diferentes casos de uso para ganchos de criação, ganchos de montagem, ganchos de atualização e ganchos de destruição.

      Se quiser aprender mais sobre o Vue.js, confira nossa página de tópico do Vue.js para exercícios e projetos de programação.



      Source link


      Leave a Comment