watch Versus watchEffect

watch-vs-watch-effect.vue

<script setup lang="ts">
import { ref, watch, watchEffect } from "vue";

const price = ref(10);
const quantity = ref(1);

watchEffect(() => {
  console.log("watchEffect()", price.value, quantity.value);
});

watch(price, () => {
  console.log("watch()", price.value, quantity.value);
});
</script>

<template>
  <main>
    <div>Prix: <input v-model="price" type="number" /></div>
    <div>Quantité: <input v-model="quantity" type="number" /></div>
  </main>
</template>