Um guia completo para o ciclo de vida do Vue 3

Enterprise 2021-04-01 11:50:20 views: null

destaque:
tema a11y-dark : condensed-night-purple

Autor: Michael Thiessen
Tradutor: Front Ash
Fonte: notícias

Goste e depois olhar novamente , WeChat procurar ** 【Da Qian Mundial】, estação de B presta atenção aos【Front-end Xiaozhi】 ** Esta pessoa não tem nenhum fundo em uma grande fábrica, mas tem uma atitude positiva para cima. Este artigo GitHubfoi incluído em https://github.com/qq449245884/xiaozhi, o artigo foi classificado e muitos dos meus documentos e materiais tutoriais foram classificados.

Recentemente, um componente do Vue foi liberado, mas não é perfeito o suficiente. Bem-vindo a todos para melhorá-lo juntos. Também espero que todos possam dar uma estrela para apoiá-lo. Obrigado.

endereço do github: https://github.com/qq449245884/vue-okr-tree

Os ganchos de ciclo de vida em Vue2 e Vue3 funcionam de forma muito semelhante. Ainda podemos acessar os mesmos ganchos e esperar que eles possam ser usados ​​nos mesmos cenários.

Caso o projeto utilize a opção API , não é necessário alterar nenhum código, pois o Vue3 é compatível com as versões anteriores.

Claro, nós Vue3 é usar uma combinação de API , uma combinação de forma de API para acessar esses ganchos são combinações ligeiramente diferentes API é particularmente útil em projetos Vue maiores.

O conteúdo principal deste artigo:

  1. Quais são os ganchos do ciclo de vida do Vue
  2. Use ganchos de ciclo de vida do Vue na API de opções
  3. Use ganchos de ciclo de vida Vue 3 na API composta
  4. Atualize o código de gancho do ciclo de vida de Vue2 para Vue3
  5. Dê uma olhada em cada gancho do ciclo de vida no Vue 2 e Vue 3
  6. crio
  7. Monte
  8. Atualizar
  9. Desinstalar
  10. ativação
  11. Novos ganchos de depuração no Vue 3

Quais são os ganchos do ciclo de vida do Vue

Primeiro, vamos dar uma olhada no diagrama dos ganchos do ciclo de vida do Vue 3 na API de opções e na API de combinação. Isso pode aprofundar nosso entendimento antes de entrar em detalhes.

image.png

Essencialmente, cada evento principal do ciclo de vida do Vue é dividido em dois ganchos, que são chamados antes e depois do evento. Existem 4 eventos principais (8 ganchos principais) no aplicativo Vue.

  • Criar - executa quando o componente é criado
  • Mount - executa quando o DOM é montado
  • Atualizar - executa quando os dados de resposta são modificados
  • Destroy - execute imediatamente antes que o elemento seja destruído

Use ganchos de ciclo de vida do Vue na API de opções

Usando a API de opções, ganchos de ciclo de vida são opções expostas na instância Vue. Não precisamos importar nada, só precisamos chamar esse método e escrever o código para este gancho de ciclo de vida.

Por exemplo, se quisermos de acesso mounted()e updated()de ciclo de vida ganchos, podemos escrever:

// 选项 API
<script>     
   export default {         
      mounted() {             
         console.log('mounted!')         
      },         
      updated() {             
         console.log('updated!')         
      }     
   }
</script>

Use ganchos de ciclo de vida Vue 3 na API composta

Na API composta, precisamos importar o gancho do ciclo de vida para o projeto antes que ele possa ser usado, o que ajuda a manter o projeto leve.

// 组合 API
import { onMounted } from 'vue'

Além de beforecatee created(eles são substituídos pelo setuppróprio método), setupexistem 9 opções para os ganchos do ciclo de vida da API que podemos acessar no método:

  • onBeforeMount- a ser chamado antes de montar o início: a renderfunção associada é chamada primeiro.

  • onMounted - Chamado quando o componente é montado

  • onBeforeUpdate- Chamado quando os dados são atualizados, antes que o DOM virtual seja corrigido. Isso é adequado para acessar o DOM existente antes da atualização, como remover manualmente o ouvinte de evento adicionado.

  • onUpdated - O DOM virtual é renderizado novamente e corrigido devido a alterações de dados, após o qual o gancho será chamado.

  • onBeforeUnmount-chamado antes de desmontar a instância do componente. Nesse estágio, a instância ainda está completamente normal.

  • onUnmounted- Chamado depois que a instância do componente é desinstalada. Quando esse gancho é chamado, todas as instruções da instância do componente são desassociadas, todos os ouvintes de evento são removidos e todas as instâncias do componente filho são descarregadas.

  • onActivated- a ser keep-alivechamado quando o cache ativou componentes.

  • onDeactivated- a ser keep-alivechamado quando o cache desabilita componentes.

  • onErrorCaptured-Chamado quando um erro de componentes descendentes é detectado. Este gancho receberá três parâmetros: o objeto de erro, a instância do componente onde ocorreu o erro e uma string contendo a origem do erro. Este gancho pode retornar falsepara evitar que o erro continue a se espalhar para cima.

Caso de uso:

// 组合 API
<script>
import { onMounted } from 'vue'

export default {
   setup () {
     onMounted(() => {
       console.log('mounted in the composition api!')
     })
   }
}
</script>

Atualize o código de gancho do ciclo de vida de Vue2 para Vue3

Este mapeamento do ciclo de vida de Vue2 para Vue3 é obtido diretamente na documentação da API de composição Vue 3 :

  • beforeCreate -> Usar setup()

  • created -> Usar setup()

  • beforeMount -> onBeforeMount

  • mounted -> onMounted

  • beforeUpdate -> onBeforeUpdate

  • updated -> onUpdated

  • beforeDestroy -> onBeforeUnmount

  • destroyed -> onUnmounted

  • errorCaptured -> onErrorCaptured

Compreensão aprofundada de cada gancho do ciclo de vida

Agora entendemos duas coisas importantes:

  • Diferentes ganchos de ciclo de vida que podemos usar
  • Como usá-los na API de opções e API de combinação

Vamos mergulhar em cada gancho do ciclo de vida para ver como eles são usados. Podemos escrever um código específico em cada gancho para testar as diferenças entre a API de opções e a API de composição.

beforeCreate () - API de opções

Como o gancho criado é usado para inicializar todas as coisas que respondem aos dados e eventos, ele beforeCreatenão pode acessar nenhum dado de resposta e eventos do componente.

Tome o seguinte bloco de código como exemplo:

// 选项 API
export default {
   data() { 
     return { 
       val: 'hello'    
     }
   },
   beforeCreate() {     
     console.log('Value of val is: ' + this.val)   
   }
}

valO valor de saída de é undefined, porque os dados não foram inicializados, não podemos chamar o método do componente aqui.

Se você deseja visualizar a lista completa de conteúdo disponível, é recomendável executar apenas console.log(this)para visualizar o conteúdo inicializado. Essa abordagem também é útil em outros ganchos ao usar a API de opções.

criado () - Opções API

Se quisermos acessar o componente quando os dados do componente e criar um evento, você pode colocar o acima beforeCreateusado no createdlugar.

// 选项API
export default {
   data() { 
     return { 
       val: 'hello'    
     }
   },
   created() {     
     console.log('Value of val is: ' + this.val)   
   }
}

A saída é Value of val is: helloporque inicializamos os dados.

createdO método usado é muito útil ao lidar com dados de reação de leitura / gravação . Por exemplo, para fazer uma chamada de API e armazenar o valor, você pode fazer isso aqui.

É melhor fazer isso aqui em vez mountedde fazê-lo, porque isso acontece durante o processo de inicialização da sincronização do Vue e precisamos realizar todas as operações de leitura / gravação de dados.

E quanto ao gancho de criação da API composta?

Para ganchos de ciclo de vida Vue3 que usam APIs compostas, use setup()substituição de método beforecatee created. Isso significa que qualquer código colocado nesses métodos agora está apenas em setupmétodos.

// 组合AP
import { ref } from 'vue'

export default {
   setup() {    
     const val = ref('hello') 
     console.log('Value of val is: ' + val.value)       
     return {         
       val
     }
   }
}

beforeMount () e onBeforeMount ()

Chamado antes de o componente DOM ser realmente renderizado e instalado. Nesta etapa, o elemento raiz ainda não existe. Na API de opções, você pode usar este. $ Els para acessar. Na API composta, para fazer isso, ele deve ser usado no elemento raiz ref.

// 选项 API
export default {
   beforeMount() {
     console.log(this.$el)
   }
 }

Use ref na API combinada:

// 组合 API
<template>
   <div ref='root'>
     Hello World
   </div>
</template> 

import { ref, onBeforeMount } from 'vue'

export default {
   setup() {
      const root = ref(null) 
      onBeforeMount(() => {   
         console.log(root.value) 
      }) 
      return { 
         root
      }
    },
    beforeMount() {
      console.log(this.$el)
    }
 }

Como app.$elainda não foi criado, a saída será undefined.

montado () e montado ()

Chamado após a primeira renderização do componente, o elemento agora está disponível, permitindo acesso direto ao DOM

Da mesma forma, na API de opções, podemos usar this.$elpara acessar nosso DOM, na API composta, precisamos usar refspara acessar o DOM no gancho do ciclo de vida Vue.

import { ref, onMounted } from 'vue'
 

 export default {
   setup() {    /* 组合 API */
 
     const root = ref(null)
 
     onMounted(() => {
       console.log(root.value)
     })
 

     return {
       root
     }
   },
   mounted() { /* 选项 API */
     console.log(this.$el)
   }
 }

beforeUpdate () e onBeforeUpdate ()

Chamado quando os dados são atualizados, antes que o DOM virtual seja corrigido. Isso é adequado para acessar o DOM existente antes da atualização, como remover manualmente o ouvinte de evento adicionado.

beforeUpdateÉ útil para rastrear o número de edições de um componente ou até mesmo para a criação de uma função "desfazer".

updated () e onUpdated ()

Depois que o DOM for atualizado, updatedo método será chamado.

<template>
    <div>
      <p>{
   
   {val}} | edited {
   
   { count }} times</p>
      <button @click='val = Math.random(0, 100)'>Click to Change</button>
    </div>
 </template>

Método da API de opções:

 export default {
   data() {
      return {
        val: 0
      }
   },
   beforeUpdate() {
      console.log("beforeUpdate() val: " + this.val)
   },
   updated() {
      console.log("updated() val: " + this.val
   }
 }

Maneiras de combinar API:

import { ref, onBeforeUpdate, onUpdated } from 'vue'
 
 export default {
   setup () {
     const count = ref(0)
     const val = ref(0)
 
     onBeforeUpdate(() => {
       count.value++;
       console.log("beforeUpdate");
     })
 
     onUpdated(() => {
       console.log("updated() val: " + val.value)
     })
 
     return {
       count, val
     }
   }
 }

Esses métodos são úteis, mas para mais cenários, precisamos usar watchmétodos para detectar essas alterações de dados. watchÉ fácil de usar porque fornece os valores antigos e novos dos dados alterados.

Outra opção é usar atributos calculados para alterar o estado com base no elemento.

beforeUnmount () 和 onBeforeUnmounted ()

Chamado antes de desinstalar a instância do componente. Nesse estágio, a instância ainda está completamente normal.

Na API de opções, um exemplo de exclusão de um ouvinte de evento é mostrado abaixo.

// 选项 API
export default {
   mounted() {
     console.log('mount')
     window.addEventListener('resize', this.someMethod);
   },
   beforeUnmount() {
     console.log('unmount')
     window.removeEventListener('resize', this.someMethod);
   },
   methods: {
      someMethod() {
         // do smth
      }
   }
} 

// 组合API
import { onMounted, onBeforeUnmount } from 'vue' 

 export default {
   setup () {
 
     const someMethod = () => {
       // do smth
     }
 
     onMounted(() => {
       console.log('mount')
       window.addEventListener('resize', someMethod);
     })
 
     onBeforeUnmount(() => {
       console.log('unmount')
       window.removeEventListener('resize', someMethod);
     })
 
   }
 }

Um método de operação real é em Vite, vue-cli ou qualquer ambiente de desenvolvimento que ofereça suporte a recarregamento a quente, quando o código é atualizado, alguns componentes são desinstalados e instalados por si próprios.

desmontado () 和 onUnmounted ()

Chamado depois que a instância do componente é desinstalada. Quando esse gancho é chamado, todas as instruções da instância do componente são desassociadas, todos os ouvintes de evento são removidos e todas as instâncias do componente filho são descarregadas.

import { onUnmounted } from 'vue'

export default {
  setup () { /* 组合 API */

    onUnmounted(() => {
      console.log('unmounted')
    })

  },
  unmounted() { /* 选项 API */
    console.log('unmounted')
  }
}

ativado () e onActivado ()

É keep-alivechamado quando o cache ativa os componentes.

Por exemplo, se usarmos o keep-alivecomponente para gerenciar diferentes visualizações de guias, sempre que alternar entre as guias, a guia atual executará o activatedgancho.

Suponha que usamos o wrapper keep-alive para os seguintes componentes dinâmicos.

<template>
   <div>
     <span @click='tabName = "Tab1"'>Tab 1 </span>
     <span @click='tabName = "Tab2"'>Tab 2</span>
     <keep-alive>
       <component :is='tabName' class='tab-area'/>
     </keep-alive>
   </div>
</template>

<script>
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'

import { ref } from 'vue'

export default {
  components: {
    Tab1,
    Tab2
  },
  setup () { /* 组合 API */
    const tabName = ref('Tab1')

    return {
      tabName
    }
  }
}
</script>

Dentro do componente Tab1.vue , podemos acessar o activatedgancho assim .

<template>
 <div>
 <h2>Tab 1</h2>
 <input type='text' placeholder='this content will persist!'/>
 </div>
</template>

<script>
import { onActivated } from 'vue'

export default {
 setup() {
    onActivated(() => {
       console.log('Tab 1 Activated')
    })
 }
} 
</script>

desativado () 和 onDativado ()

É keep-alivechamado quando o cache desabilita componentes.

Esse gancho é útil em alguns casos de uso, como salvar dados do usuário e disparar animações quando uma determinada visualização perde o foco.

import { onActivated, onDeactivated } from 'vue'

export default {
  setup() {
    onActivated(() => {
       console.log('Tab 1 Activated')
    })

    onDeactivated(() => {
       console.log('Tab 1 Deactivated')
    })
  }
}

Agora, quando alternamos entre as guias, o estado de cada componente dinâmico será armazenado em cache e salvo.

4216299740-605e8878b7355_fix732.gif

Gancho de depuração Vue3

O Vue3 nos fornece dois ganchos que podem ser usados ​​para fins de depuração.

  1. onRenderTracked
  2. onRenderTriggered

Ambos os eventos têm um.Este debugger eventevento informa qual operação está rastreando o componente e o objeto de destino e a chave da operação.

onRenderTracked

Chamado ao rastrear a re-renderização virtual do DOM. Gancho de recebimento debugger eventcomo parâmetros. Este evento informa qual operação está rastreando o componente e o objeto de destino e a chave da operação.

<div id="app">
  <button v-on:click="addToCart">Add to cart</button>
  <p>Cart({
   
   { cart }})</p>
</div>

const app = Vue.createApp({
  data() {
    return {
      cart: 0
    }
  },
  renderTracked({ key, target, type }) {
    console.log({ key, target, type })
    /* 当组件第一次渲染时，这将被记录下来:
    {
      key: "cart",
      target: {
        cart: 0
      },
      type: "get"
    }
    */
  },
  methods: {
    addToCart() {
      this.cart += 1
    }
  }
})

app.mount('#app')

renderTracked

Quando a renderização virtual re-DOM é acionada. Da mesma forma é renderTrackedreceber debugger eventcomo um parâmetro. Este evento informa qual operação acionou a nova renderização, bem como o objeto de destino e a chave da operação.

uso:

<div id="app">
  <button v-on:click="addToCart">Add to cart</button>
  <p>Cart({
   
   { cart }})</p>
</div>

const app = Vue.createApp({
  data() {
    return {
      cart: 0
    }
  },
  renderTriggered({ key, target, type }) {
    console.log({ key, target, type })
  },
  methods: {
    addToCart() {
      this.cart += 1
      /* 这将导致renderTriggered调用
        {
          key: "cart",
          target: {
            cart: 1
          },
          type: "set"
        }
      */
    }
  }
})

app.mount('#app')

Resumindo

Quer você escolha usar a opção API ou a API composta, é importante não apenas saber qual gancho de ciclo de vida usar, mas também saber por que deseja usá-lo.

Para muitos problemas, vários ganchos de ciclo de vida podem ser usados. Mas é melhor saber qual é o melhor para o seu caso de uso. Em qualquer caso, você deve pensar sobre isso com cuidado e ter um bom motivo para escolher um gancho de ciclo de vida específico.

Espero que isso ajude você a entender mais sobre ganchos de ciclo de vida e como implementá-los em seus projetos.

~ Fim, sou Shuwanzhi, vou lavar os pratos, os ossos são brancos.

Os possíveis bugs após a implantação do código não podem ser conhecidos em tempo real.Para resolver esses bugs posteriormente, muito tempo foi gasto na depuração de log.A propósito, gostaria de recomendar uma ferramenta útil de monitoramento de BUG Fundebug .

Original: https://learnvue.co/2020/12/how-to-use-lifecycle-hooks-in-vue3/

comunicar com

O artigo é atualizado continuamente todas as semanas, e você pode pesquisar "Da Qian World" no WeChat para ler e atualizar o mais rápido possível (um ou dois artigos antes do blog). Este artigo foi incluído e organizado no GitHub https: //github.com/qq449245884/xiaozhi Muitos dos meus documentos são bem-vindos ao Star e perfeito. Você pode consultar o site de teste para análise durante as entrevistas. Além disso, siga o relato oficial e responda aos benefícios em segundo plano para ver Os benefícios.

Acho que você gosta

Origin blog.csdn.net/qq449245884/article/details/115341203
Recomendado
Clasificación
Diario
Más
2024-06-17(0)
2024-06-16(0)
2024-06-15(0)
2024-06-14(0)
2024-06-13(0)
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)

Code World

© 2018 codetd.com