Options de l'instance Vue

Les options dans Vue sont les différentes options disponibles sur une instance Vue lors de l'utilisation de l'API Options.

Quelques options courantes des instances Vue :

  • el- Spécifie l'élément DOM sur lequel l'instance Vue est montée. S'il n'est pas fourni, l'instance Vue ne sera pas montée automatiquement.

  • data- Définit l'objet de données de l'instance Vue. Le template, les propriétés calculées, les méthodes, les observateurs, etc. de l'instance Vue peuvent accéder à ces données.

  • computed- Contient des propriétés calculées dont les valeurs sont mises en cache en fonction de leurs dépendances. Les propriétés calculées ne sont réévaluées que lorsque leurs dépendances changent.

  • methods- Définit les méthodes de l'instance Vue qui peuvent être appelées dans le template via des écouteurs d'événements.

  • watch- Contient un ou plusieurs observateurs pour observer et réagir aux modifications des données dans l'instance Vue.

  • props- Définit les données externes que le composant peut recevoir.

  • components- Permet d'enregistrer des composants personnalisés dans l'instance Vue.

  • directives- Permet d'enregistrer des directives personnalisées globales.

  • filters- Définit des filtres qui peuvent être utilisés dans le template pour le formatage du texte.

  • model- Spécifie les propriétés et événements v-model personnalisés utilisés par le composant.

  • provide/inject- Fournit une capacité d'injection de dépendances, permettant de transmettre des données entre les composants.

  • lifecycle hooks- InclutonMounted, onUpdated, onUnmountedlifecycle hooks, etc., utilisés pour exécuter du code à différentes étapes de l'instance Vue.

  • template- Définit le template HTML de l'instance Vue.

  • render function- Permet d'utiliser des fonctions JavaScript pour rendre des composants, offrant des capacités de personnalisation plus avancées.

  • errorCaptured- Utilisé pour capturer globalement les erreurs dans l'instance Vue.

  • emits- Définit les événements que le composant peut émettre.

  • setup- La fonction d'entrée de la Composition API de Vue 3, utilisée pour organiser la logique du composant.

el

Point de montage, utilisé pour spécifier l'élément DOM auquel l'instance Vue est montée :

Exemple

const app = Vue.createApp({
  // options
});
app.mount('#app');

data

  • Type: Function or Object

  • Objectif: dataest l'endroit dans l'instance Vue utilisé pour stocker les données du composant. Vous pouvezdatay définir diverses propriétés de données et les utiliser sur la page via la syntaxe de template.dataLes données qu'il contient se mettent à jour de manière réactive, ce qui signifie que lorsque les données changent, le contenu de page associé se met à jour automatiquement.

Exemple

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

computed

  • Type: Object

  • Objectif: computedLa propriété permet de déclarer des propriétés calculées basées sur des dépendances réactives. Les propriétés calculées ne sont réévaluées que lorsque leurs dépendances associées changent, et elles mettent en cache les résultats calculés afin d'éviter des calculs répétés inutiles.

Exemple

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  calculé: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

methods

  • Type: Object

  • Objectif: methodsLa propriété est utilisée pour stocker des méthodes dans l'instance Vue. Ces méthodes peuvent être appelées dans le template et également utilisées dans d'autres méthodes de l'instance. Contrairement aux propriétés calculées, les méthodes sont réexécutées à chaque fois qu'elles sont appelées, ce qui les rend adaptées pour répondre à des événements ou effectuer des opérations asynchrones.

Exemple

const app = Vue.createApp({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

watch

  • Type: Object ou Function

  • Objectif: watchLa propriété est utilisée pour observer et réagir aux changements de données dans l'instance Vue. Lorsque les données observées changent, la fonction de rappel spécifiée est exécutée. Elle convient pour gérer une logique asynchrone ou complexe de changement de données.

Exemple

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changé de ${oldValue} à ${newValue}`);
    }
  }
});

props

  • Type: Array ou Object

  • Objectif: propsLa propriété est utilisée pour recevoir les données transmises du composant parent au composant enfant. Dans le composant enfant,propsles données transmises par le composant parent sont reçues et peuvent être utilisées à l'intérieur du composant.

Dans l'exemple suivant, MyComponent reçoit une prop title et l'utilise dans le template :

Exemple

const MyComponent = {
  props: ['title'],
  template: '<h1>{{ title }}</h1>'
};

const app = Vue.createApp({
  components: {
    'my-component': MyComponent
  },
  template: '<my-component title="Hello Vue 3!"></my-component>'
});

app.mount('#app');

template

  • Type: String

  • Objectif: templateLa propriété définit la structure du template du composant Vue. La syntaxe de template de Vue peut être utilisée dans le template, y compris l'interpolation, les directives, les propriétés calculées, etc. Le template est finalement compilé en une fonction de rendu pour générer le DOM virtuel du composant.

Exemple

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  template: '<div>{{ message }}</div>'
});

components

L'option `components` est utilisée pour enregistrer des composants locaux.

Exemple

const ChildComponent = {
  template: '<div>A child component</div>'
};

const app = Vue.createApp({
  components: {
    'child-component': ChildComponent
  },
  template: '<child-component></child-component>'
}).mount('#app');

provide / inject

Le composant parent fournit les données, et le composant enfant les injecte et les utilise.

Exemple

const ChildComponent = {
  inject: ['message'],
  template: '<div>{{ message }}</div>'
};

const app = Vue.createApp({
  fournissent() {
    return {
      message: 'Provided Message'
    };
  },
  components: {
    'child-component': ChildComponent
  },
  template: '<child-component></child-component>'
}).mount('#app');

Hooks de cycle de vie

beforeCreate

Appelé avant l'initialisation de l'instance.

Exemple

const app = Vue.createApp({
  beforeCreate() {
    console.log('beforeCreate');
  }
}).mount('#app');

created

Appelé après la création de l'instance.

Exemple

const app = Vue.createApp({
  created() {
    console.log('created');
  }
}).mount('#app');

beforeMount

Appelé avant le montage.

Exemple

const app = Vue.createApp({
  beforeMount() {
    console.log('beforeMount');
  }
}).mount('#app');

mounted

Appelé après que l'instance a été montée.

Exemple

const app = Vue.createApp({
  mounted() {
    console.log('mounted');
  }
}).mount('#app');

beforeUpdate

Appelé avant que les données soient mises à jour.

Exemple

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello'
    };
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}).mount('#app');

updated

Appelé après que les données ont été mises à jour.

Exemple

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello'
    };
  },
  updated() {
    console.log('updated');
  }
}).mount('#app');

beforeUnmount

Appelé avant que l'instance soit démontée.

Exemple

const app = Vue.createApp({
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}).mount('#app');

unmounted

Appelé après le démontage de l'instance.

Exemple

const app = Vue.createApp({
  unmounted() {
    console.log('unmounted');
  }
}).mount('#app');

Autres options

directives

Enregistrer des directives locales.

Exemple

const app = Vue.createApp({
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  },
  template: '<input v-focus>'
}).mount('#app');

mixins

Objets mixin.

Exemple

const myMixin = {
  created() {
    console.log('Mixin created');
  }
};

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('Component created');
  }
}).mount('#app');

extends

Étendre un autre composant.

Exemple

const BaseComponent = {
  created() {
    console.log('BaseComponent créé');
  }
};

const app = Vue.createApp({
  extends: BaseComponent,
  created() {
    console.log('Composant étendu créé');
  }
}).mount('#app');

inheritAttrs

Indique s'il faut hériter des attributs du composant parent.

Exemple

const MyComponent = {
  inheritAttrs: false,
  props: ['title'],
  template: '<div><h1>{{ title }}</h1></div>'
};

const app = Vue.createApp({
  components: {
    'my-component': MyComponent
  },
  template: '<my-component title="Bonjour" id="app"></my-component>'
}).mount('#app');

setup

Utilisé pour l'API de composition.

Exemple

const app = Vue.createApp({
  setup() {
    const message = Vue.ref('Bonjour Vue 3 !');
    return { message };
  },
  template: '<h1>{{ message }}</h1>'
}).mount('#app');

expose

Dans l'API Composition de Vue 3, lorsque vous utilisez la fonction setup pour définir la logique d'un composant, vous pouvez utiliser la méthode expose pour spécifier explicitement les propriétés et méthodes à exposer à l'extérieur.

Voici un exemple simple montrant comment utiliser expose pour exposer des propriétés et des méthodes dans un composant Vue 3 :

Composant parent (ParentComponent.vu)

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">Appeler l'enfant</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const child = ref(null);

    const callChildMethod = () => {
      if (child.value) {
        child.value.exposedMethod();
      }
    };

    return {
      child,
      callChildMethod
    };
  }
};
</script>

Composant enfant (ChildComponent.vue)

<template>
  <div>
    <p>{{ exposedData }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup(_, { expose }) {
    const exposedData = ref('Hello from Child Component');
   
    const exposedMethod = () => {
      console.log('Child component method called');
    };

    expose({
      exposedData,
      exposedMethod
    });

    return {
      exposedData
    };
  }
};
</script>

Explication :

  1. Composant parent:

    • Dans le composant parent, utilisezrefpour créer une référence au composant enfant.child。
    • DanscallChildMethodDans la méthode, viachild.valueaccédez à l'instance du composant enfant et appelez les méthodes exposées par le composant enfant.exposedMethod。

  2. Composant enfant:

    • Dans la fonction du composant enfant,setupviarefcréez une donnée réactiveexposedData。
    • définissez une méthodeexposedMethod, utilisée pour montrer comment exposer des méthodes.
    • Utiliserexposela méthode pour exposer explicitementexposedDataetexposedMethodau composant parent.
    • RetourexposedData, afin qu'il puisse être utilisé dans le template.
Autres extensions