Vuejs : Watcher sur des objets

Afin d’observer le changement d’un objet dans un composant VuejS on peut faire ceci :

<script setup>
const form = ref({
  firstname: 'Aurélien',
  lastname: 'Chappard',
})

watch(form.value, (newValue, oldValue)=>{
  console.log(newValue);
  console.log(oldValue);
})
</script>

Dans cet exemple, newValue et oldValue seront identiques car ils font appel à une référence. Si vous n’avez pas besoin d’utiliser newValue ou oldValue, vous pouvez vous contenter de ce code :

<script setup>
const form = ref({
  firstname: 'Aurélien',
  lastname: 'Chappard',
})

watch(form.value, ()=>{
  // faites votre traitement ici...
})
</script>

Sinon, il sera nécessaire de créer un watcher un peu différent :

<script setup>
import {cloneDeep} from "lodash";
const form = ref({
  firstname: 'Aurélien',
  lastname: 'Chappard',
})

watch(() => cloneDeep(form.value), (newValue, oldValue) => {
  // faites votre traitement ici : newValue et oldValue seront différents...
  console.log(newValue);
  console.log(oldValue);
})
</script>

Nous pouvons voir que nous clonons notre objet grace à la fonction cloneDeep de loadash