watch

 

watch

 

computed와 다른점은 코드가 길어지고, return이 필요없다는 점

• immediate : 초기값 표시여부 설정

 

// HTML
<template>
	
  <input type="number" v-model="price1" />
  <br>
  <input type="number" v-model="price2" />
  <br>
  <input type="number" v-model="price3" />
  <br>

  <span>合計：{{ calc1 }}</span>
  <br>
  <span>合計に対する10%：{{ calc2 }}</span>
  
</template>

// Javascript
<script setup>
  import { ref, watch } from 'vue'
	
  const price1 = ref(1000);
  const price2 = ref(1000);
  const price3 = ref(1000);

  let calc1 = ref(0);
  watch(
    () => price1.value + price2.value + price3.value,
    (newValue, oldValue) => {
      calc1.value = newValue;
    },
    { immediate: true }
  );

  let calc2 = ref(0);
  watch(
    () => (price1.value + price2.value + price3.value) * 0.1,
    (newValue, oldValue) => {
      calc2.value = newValue;
    },
    { immediate: true }
  );

  
</script>