17 - Ciclo de vida de un objeto Vue
Cada instancia Vue pasa por una serie de pasos de inicialización cuando se crea. Durante este ciclo Vue le da la oportunidad al desarrollador de especificar código propio.
created
Si definimos un atributo en la instancia Vue llamado created y le alamcenamos una función, la misma se ejecutará inmediatamente después que el objeto de la clase Vue se haya creado:
new Vue({
data: {
nombre: 'juan'
},
created: function () {
console.log('El atributo nombre almacena : ' + this.nombre);
}
})
Si ejecutamos esto veremos en la consola el valor almacenado en el atributo 'nombre' que es juan. Este método se ejecuta inmediatamente se haya creado la instancia, no se debe llamar a esta función, sino se ejecuta en forma automática.
Problema
Resolveremos el mismo problema del concepto anterior que hacía una petición JSON, pero la llamada la haremos inmediatamente luego que la instancia Vue sea creada y no al presionar un botón:
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<div v-for="nota in notas">
<h1>{{nota.title}}</h1>
{{nota.body}}
<hr>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
notas:[]
},
created: function() {
this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function (respuesta) {
this.notas=respuesta.body
})
}
})
</script>
</body>
</html>
Además de borrar el botón hemos movido la lógica del método que recupera los datos mediante la petición JSON:
created: function() {
this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function (respuesta) {
this.notas=respuesta.body
})
}
La carga de datos se efectúa en forma automática cuando ingresamos a la página.
Otros puntos para agregar código
Hay posibilidad de agregar otras funciones que se disparan en distintos estados de la instancia Vue como son mounted, updated, destroyed etc. A medida que avancemos iremos utilizando alguno de esos puntos de disparo.
Una representación gráfica de estos puntos los hace la documentación oficial de Vue.
