Cycle de vie & Watchers

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

const users = ref([])
const loading = ref(true)

onMounted(async () => {
  // Le composant est dans le DOM
  // Idéal pour charger des données
  const response = await fetch('/api/users')
  users.value = await response.json()
  loading.value = false
})
</script>

<template>
  <p v-if="loading">Chargement...</p>
  <ul v-else>
    <li v-for="user in users">
      {{ user.name }}
    </li>
  </ul>
</template>

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

const scrollY = ref(0)

function handleScroll() {
  scrollY.value = window.scrollY
}

// Ajouter l'écouteur
onMounted(() => {
  window.addEventListener(
    'scroll', handleScroll
  )
})

// Supprimer l'écouteur
onUnmounted(() => {
  window.removeEventListener(
    'scroll', handleScroll
  )
})
</script>

<template>
  <p>Scroll : {{ scrollY }}px</p>
</template>

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

const search = ref('')
const results = ref([])

// Surveiller 'search' et réagir
watch(search, async (newVal, oldVal) => {
  console.log(
    `"${oldVal}" → "${newVal}"`
  )

  if (newVal.length >= 3) {
    const res = await fetch(
      `/api/search?q=${newVal}`
    )
    results.value = await res.json()
  }
})
</script>

<template>
  <input v-model="search"
         placeholder="Rechercher..." />
  <ul>
    <li v-for="r in results">
      {{ r.name }}
    </li>
  </ul>
</template>