Vue.JS

Lifecycle Hooks & HTTP Requests

David Daza

Full Stack Developer - Datasketch

 @ddazal

 @_daviddaza

Streaming

Agradecimientos

Ciclos de vida

Funciones emitidas por Vue en los pasos de inicialización de una instancia

✅ beforeCreate

✅ created

✅ beforeMount

✅ mounted

✅ beforeUpdate

✅ updated

✅ beforeDestroy

✅ destroyed

new Vue({
  el: '#app',
  beforeCreate() { /* ... */ },
  created() { /* ... */ },
  beforeMount() { /* ... */ },
  mounted() { /* ... */ },
  beforeUpdate() { /* ... */ },
  updated() { /* ... */ },
  beforeDestroy() { /* ... */ },
  destroyed() { /* ... */ },
})

beforeCreate

Es llamado antes de que la instancia pueda observar los datos y configurar eventos y watchers

created

La instancia configura los datos, computed properties, métodos, watch/event callbacks.

beforeMount

$el está disponible

mounted

Se hace render del DOM

beforeUpdate

Es llamado cuando cambian los datos, pero antes de actualizar el DOM

updated

Es llamado cuando el DOM se ha actualizado con el cambio de los datos

beforeDestroy

Es llamado justo antes de destruir la instancia/componente

destroyed

El componente ha sido eliminado totalmente

HTTP Requests

Enviar y recibir datos sin recargar la página

Demo

Herramientas

✅ Fetch API

✅ Axios

✅ Trae

✅ AJAX

¡GRACIAS!

 @ddazal

 @_daviddaza

Lifecycle Hooks & HTTP Requests

By David Daza

Lifecycle Hooks & HTTP Requests

Slides para Meetup virtual de Vue.JS. Abril 7, 2020.

  • 164