Formation Apprendre Vue.js : Composition ou Option ?

Si vous avez fait un tour sur la documentation vous avez du remarquer la présence d'un bouton permettant de changer le format de code. Mais à quoi correspond ces format ?

L'API option

Depuis le début de cette formation on a utilisé l'API Composition mais il existe une autre approche qui utilisé un objet d'option.

<script>
export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // a computed getter
    publishedBooks() {
      // `this` points to the component instance
      return this.author.books.length
    }
  }
}
</script>

Cette manière d'écrire les composants est héritée de la version 2 de Vue.js mais n'est pas conseillée si vous commencez un nouveau projet. Elle avait comme principal inconvénient de rendre difficile la réutilisation de logique.

Le setup

Pour pallier au problème de réutilisation, l'API composition a été introduite lors de la version 3 et utilisait une option setup.

<script>
export default {
  setup() {
    const author = ref({
      name: 'John Doe',
      books: [
        'Vue 2 - Advanced Guide',
        'Vue 3 - Basic Guide',
        'Vue 4 - The Mystery'
      ]
    })
    const publishedBooks = computed(() => author.value.books.length)
    return {
      author,
      publishedBooks
    }
  }
}
</script>

Pour simplifier la syntaxe, l'attribut setup a été introduit pour simplifier encore plus la syntaxe.

<script setup>
const author = ref({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})
const publishedBooks = computed(() => author.value.books.length)
</script>

C'est cette syntaxe que l'on utilisera aujourd'hui par défaut lorsque l'on travaille avec Vue.