Lifecycle hook
Dans vuejs, il existe ce qu’on appelle un cycle de vie. Ce cycle définit des actions exécutables à un instant T.
Voici un schéma général du cycle de vie avec le nom des fonctions appelés pour chaque actions sur le dom.
Schéma
HTML
<div id="app" v-cloack>
<button @click="toggleForm">Show the form</button>
<login-form v-if="isVisible" />
</div>Script
Script
<script src="https://unpkg.com/vue@next"></script>
<script>
// Créer l'application
let app = Vue.createApp({
data: function() {
return {
// ma variable
isVisible: false
}
},
methods: {
toggleForm: function(){
this.isVisible = !this.isVisible
// la fonction supprime ou ajoute dans le domaine le composant "login-form"
}
}
})
app.component('login-form', {
template:`
<form @submit.prevent="handleSubmit">
<h1>Cycle de vie - vue.js</h1>
<custom-input
v-for="(input, i) in inputs"
:key="i"
v-model="input.value"
:label="input.label"
:type="input.type"
/>
<button>Log in</button>
</form>
`,
components: ['custom-input'],
data() {
return {
title: 'Login form',
inputs: [
{
label: 'Email',
value: '',
type: 'email'
},
{
label: 'Password',
value: '',
type: 'password'
}
],
email: '',
password: '',
emailLabel: 'Email',
passwordLabel: 'Password'
}
},
methods: {
handleSubmit(){
console.log(this.inputs[0].value, this.inputs[1].value)
}
}, //à placer directement dans le composant pas dans "methods:"
created(){
console.log("created")
//Le composant est d'abord créé
},
mounted() {
console.log("mounted")
//Le composant est ensuite monté sur le domaine
},
updated() {
console.log("updated")
//Si une variable dans le composant est changée, il change sur le domaine. Il est donc "updated"
},
unmounted() {
console.log("unmounted")
//Si ma fonction toggleForm fait disparaître le composant avec v-if. Il est supprimé du domaine et donc enlevé
}
})
custom-input
app.component('custom-input', {
template: `
<label>
<input :type="type" v-model="inputValue">
</label>
`,
props: ['label', 'type', 'modelValue'],
computed: {
inputValue: {
get(){
return this.modelValue
},
set(value){
this.$emit('update:modelValue', value)
}
}
}
})
// Monte l'application en fonction de l'id
app.mount('#app')
</script>Information
A partir de maintenant, j'afficherai l'ensemble avec des balises spoilers pour éviter d'encombrer le visuel. Le code sans spoiler sera la partie éssentiel.