Tutoriel VueJS : Vue Composition API

Si vous suivez l'actualité autour de VueJS vous avez dû entendre parler d'un changement majeur de fonctionnement de l'API. Récemment renommée Composition API, cette API va permettre de mieux organiser son code et de créer des logiques réutilisables.

Encore du changement ?

Ne paniquez pas ! La première version de l'API était très disruptives mais a été changé suite aux retours de la communauté (c'était d'ailleurs pour obtenir des retours que l'API a été proposée en "Request For Comments").

• La nouvelle RFC, renommée Vue Composition API, est pensée pour être additive et fonctionnera en plus de l'API existante. Il ne sera donc pas nécessaire de réécrire complètement vos anciens composants.
• VueJS reste VueJS. Même si l'API propose une logique différente les concepts que vous connaissez aujourd'hui reste les mêmes (computed, mounted, unmounted...).

Quel est l'objectif ?

L'objectif de l'API composition est de permettre de mieux organiser son code et d'éviter le problème des "monster component". En effet, le fonctionnement actuel nous force à éparpiller la logique de notre composant dans les différentes propriétés (methods, data, onMounted...).

Le code pourra maintenant être réunit dans une seule fonction setup().

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

Mais surtout séparé dans des fonctions, qui pourront être réutilisées dans plusieurs composants si nécessaire.

<template>
<div>
  Je m'autoincrémente : {{n}}<br>
  Moi je m'incrément manuellement : {{i}} et multiplié par 2 ça donne {{double}}<br>
  <button @click="increment">Incrémenter</button>
</div>
</template>

<script>
import { computed, ref, onMounted, onUnmounted } from 'vue'

// Cette fonction peut être dans un autre fichier si besoin
function useAutoincrement () {
  const n = ref(0)
  const timer = null
  onMounted(() => {
    timer = window.setInterval(() => {
      n.value++
    }, 1000)
  })
  onUnmounted(() => {
    if (timer) {
      window.clearInterval(timer)
      timer = null
    }
  })
  return n
}

function useIncrement () {
  const n = ref(0)
  const increment = function () {
    n.value++
  }
  return [n, increment]
}

export default {
  setup() {
    const n = useAutoIncrement()
    const [i, increment] = useIncrement()
    const double = computed(() => i.value * 2)

    return {
      n,
      i,
      double,
      increment
    }
  }
}
</script>