Evan You, le créateur de Vue.js, vient de communiquer des dates plus précises sur la sortie de la nouvelle version de Vue : Vue 3.

Pour résumer, si vous voulez utiliser Vue 3 dans un nouveau projet, il vaut mieux attendre la release finale qui est estimée à début août 2020. Vue 3 est en beta depuis plus de 2 mois maintenant, il est donc tout à fait pertinent de le prendre en main dès aujourd’hui.

Composition API

La nouveauté au cœur de Vue 3 est l’API Composition, elle permet une meilleure organisation du code et de partager facilement des fonctionnalités entre les composants.

Vue 2 est basée, quant à elle, sur l’API Options (data, computed, methods…). La nouvelle “philosophie” de Vue a fait débat parmi les développeurs mais nombreux réalisent le potentiel de l’API Composition en terme de réutilisation du code. Voyons la tout de suite en action en comparant Vue 2 et Vue 3 🔍

Remplacement des Mixins

J’ai créé un exemple pas forcément très pertinent fonctionnellement parlant mais il permet de voir la praticité de l’API composition. Nous avons besoin d’afficher 2 messages “Welcome” et “Farewell” qui sont une concaténation de chaînes de caractères.


// Vue 2 mixins approach
const WelcomeMixin = {
  data() {
    return {
      welcomeText: 'Welcome to',
      welcomeName: 'the Mixin'
    }
  },
  computed: {
     welcomeMessage() {
       return this.welcomeText + ' ' + this.welcomeName;
     }
  },
};

const FarewellMixin = {
  data() {
    return {
      farewellText: 'Bye bye',
      farewellName: 'user',
    }
  },
  computed: {
    farewellMessage() {
      return (this.farewellText + ' ' + this.farewellName).toUpperCase()
    }
  }
};

const App = {
  mixins: [WelcomeMixin, FarewellMixin],
  template: `{{ welcomeMessage }} - {{ farewellMessage }}`,
};

Dans l’exemple ci-dessus, avec Vue 2, nous utilisons des Mixins. Le problème avec les Mixins est qu’il faut faire attention aux collisions au niveau du nom des variables et méthodes. Difficile à gérer lorsqu’un composant commence à utiliser plusieurs mixins…


// In Vue 3, we import from Vue
const { createApp, ref, computed } = Vue;

function useWelcome() {
  //State
  const text = ref('Welcome to');
  const name = ref('the Mixin');
  
  //Computed
  const message = computed(() => {
    return text.value + ' ' + name.value
  });
  
  return { message };
}

function useFarewell() {
  //State
  const text = ref('Bye bye');
  const name = ref('user');
  
  //Computed
  const message = computed(() => {
    return (text.value + ' ' + name.value).toUpperCase()
  });
  
  return { message };
}

const App = {
  setup() {
    const { message } = useWelcome()
    const { message: farewell } = useFarewell() //avoid namespace collision
    
    return { 
      message, 
      farewell 
    }
  },
  template: `{{ message }} - {{ farewell }}`,
};

Avec Vue 3, ces problématiques sont évitées grâce à l’API Composition. Je n’ai plus à me soucier du nom de mes variables et mes fonctions sont plus facilement réutilisables dans d’autres composants. On identifie facilement d’où proviennent les variables message et farewell.

Apprendre Vue 3

Pour les impatients qui ne peuvent pas attendre la documentation officielle qui sortira au mois de juillet, les RFC sont dispos sur Github (exemple : Composition API RFC). De nombreux articles et vidéos sont également disponibles sur internet.

Avec tous ces éléments, amusez-vous en créant un projet avec la commande npm init vite-app hello-vue3 🧪

UPDATE : La documentation a été mise à jour et est maintenant disponible à l’adresse suivante https://v3.vuejs.org/ , bonne lecture !