DevTools - ClicAndCode

Composition API : <script setup>

Facile

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

const count = ref(0)
</script>

Composition API : setup()

Facile

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}

Définir des props (Composition API)

Facile

<script setup>
const props = defineProps({
  titre: String
})
</script>

Émettre un événement (Composition API)

Intermédiaire

<script setup>
const emit = defineEmits(['enlarge-text'])

emit('enlarge-text')
</script>

Hooks de cycle de vie

Facile

import { onMounted } from 'vue'

onMounted(() => {
  console.log('le composant est monté.')
})

Observateur (watch)

Intermédiaire

import { watch } from 'vue'

watch(count, (newCount) => {
  console.log(`new count is: ${newCount}`)
})

Observateur d'effet (watchEffect)

Avancé

watchEffect(() => {
  console.log(count.value)
})

Propriété calculée (computed)

Intermédiaire

import { computed } from 'vue'

const plusOne = computed(() => count.value + 1)

Provide / Inject

Avancé

// Parent
import { provide } from 'vue'
provide('message', 'bonjour')

// Enfant
import { inject } from 'vue'
const message = inject('message')

Réactivité avec reactive()

Intermédiaire

import { reactive } from 'vue'

const state = reactive({ count: 0 })

Réactivité avec ref()

Facile

const count = ref(0)

function increment() {
  count.value++
}

📚 Cheatsheet