การใช้งาน Watcher ตรวจสอบการเปลี่ยนแปลงข้อมูล ใน VueJS

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

const message = ref('');

watch(message, (newVal, oldVal) => {
  console.log(`message changed from ${oldVal} to ${newVal}`)
})
</script>

<template>
  <h1>{{ message }}</h1>
  <input v-model="message">
</template>

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

const message = ref('');
const name = ref('')
watch([message ,name], ([newMsg, newName],[oldMsg, oldName]) => {
    console.log(`message changed from ${oldMsg} to ${newMsg}`)    
    console.log(`name changed from ${oldName} to ${newName}`)
})
</script>

<template>
  <h1>{{ message }} {{ name }}</h1>
  <input v-model="message" placeholder="Edit message"><br>
  <input v-model="name" placeholder="Enter name">
</template>

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

const x = ref(0)
const y = ref(0)
const obj = reactive({ count: 0 })

// single ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter  ฟังก์ชั่น เมื่อ ค่าของ x + y
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// array of multiple sources ค่าของ x และค่ของ ฟังก์ชั่น ที่คืนค่า y
// ตัวอย่าง ไม่ส่งค่าข้อมูล เก่าเข้าไปใน callback ฟักง์ชั่น ส่งแค่ค่าใหม่
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

// รูปแบบด้านล่างนี้จะไม่ทำงาน เพราะเป็นการส่งตัวเลข 0 เข้าไปในฟังก์ชั่น watch()
/*watch(obj.count, (count) => {
  console.log(`Count is: ${count}`)
})
*/
// ให้ใช้รูปแบบนี้แทน เป็นแบบ getter function หรือฟังก์ชั่นที่คืนค่าข้อมูลมาอีกที
watch(
  () => obj.count,
  (count) => {
    console.log(`Count is: ${count}`)
  }
)

</script>

<template>
  <h1>{{ x }} {{ y }}</h1>
  <input type="number" v-model="x" placeholder="Enter X"><br>
  <input type="number" v-model="y" placeholder="Enter Y"><br>
  <button @click="obj.count++">{{ obj.count }}</button>
</template>

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

const obj = reactive({ count: 0 })

// แตกต่างจากตัวอย่างด้านบนตรงที่ด้านบน ระบุ property ที่ต้องการได้เลย
// ในขณะที่วิธีนี้ตรวจสอบทั้ง object รวม property ทั้งหมดภายใน
watch(
  obj,
  (newValue, oldValue)  => {
    console.log(`Count is: ${newValue.count}`)
  }
)
</script>

<template>
  <button @click="obj.count++">{{ obj.count }}</button>
</template>

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

const obj = reactive({ count: 0 })

watch(
  () => obj.count,
  (newValue, oldValue)  => {
    console.log(`Count is: ${newValue}`)
  },
  { deep: true }
)
</script>

<template>
  <button @click="obj.count++">{{ obj.count }}</button>
</template>

const obj = reactive({ nested: { count: 0 } })

// Watcher with { deep: true }
watch(
  () => obj.nested,
  (newValue, oldValue)  => {
    console.log('Nested object changed')
  },
  { deep: true }
)

// Watcher without { deep: true }
watch(
  () => obj.nested,
  (newValue, oldValue)  => {
    console.log('Nested object changed')
  }
)

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

const message = ref('Hello World')

watch(
  message,
  (newVal, oldVal) => {
    console.log(`message changed from ${oldVal} to ${newVal}`);
  },
  { immediate: true }
);

// การเปลี่ยนแปลงค่าของ message หลังจาก mount จะถูกจับโดย watcher ทันที
setTimeout(() => {
  message.value = 'Hello Vue 3!';
}, 1000);
</script>

<template>
  <h1>{{ message }}</h1>
</template>

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

const someData = ref('Hello World');
const anotherData = ref(123);

watchEffect(() => {
  console.log(`someData is now: ${someData.value}`);
  console.log(`anotherData is now: ${anotherData.value}`);
});

// จำลองการเปลี่ยนแปลงค่าของ someData และ anotherData หลังจาก mount
setTimeout(() => {
  someData.value = 'Hello Vue 3!';
  anotherData.value = 456;
}, 1000);
</script>

<template>
  <div>{{ someData }}</div>
  <div>{{ anotherData }}</div>
</template>

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

const someData = ref('Hello World');
const anotherData = ref(123);

watchEffect(async () => {
  // กรณีนี้  เฉพาะ someData เท่านั้น ที่ watcher ตรวจจับการเปลี่ยนแปลง
  // เพราะเป็นส่วนของ state ที่ถูกเรียกใช้ก่อนรูปแบบ await แรก
  console.log(`someData is now: ${someData.value}`)
  await new Promise(resolve => setTimeout(() => {
    console.log(`anotherData is now: ${anotherData.value}`)  
    return resolve
  },3000));
});

// จำลองการเปลี่ยนแปลงค่าของ someData และ anotherData หลังจาก mount
// กรณีนี้มีผลต่อ watcher เพราะมี someData ที่มีค่าเปลี่ยนแปลง
setTimeout(() => {
  someData.value = 'Hello Vue 3!';
  anotherData.value = 456;
}, 1000);

// จำลองการเปลี่ยนแปลงที่วินาทีที่ 10
// anotherData ไม่มีผลต่อ watcher
setTimeout(() => {
  anotherData.value = 789;
}, 10000);
</script>

<template>
  <div>{{ someData }}</div>
  <div>{{ anotherData }}</div>
</template>

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

const someData1 = ref('Hello World 1');
const someData2 = ref('Hello World 2');
const someData3 = ref('Hello World 3');

watchEffect( () => {
  // callback function ก่อนการอัปเดต DOM (ค่าเริ่มต้น)
  console.log(`someData1 is now: ${someData1.value}`);
});

watchEffect( () => {
  //  เรียก callback function หลังจากการอัปเดต DOM เสร็จสิ้นแล้ว
  console.log(`someData2 is now: ${someData2.value}`);
},
{ flush: 'post' }
);
// หรือใช้เป็น watchPostEffect
/*
watchPostEffect( () => {
  // callback function ก่อนการอัปเดต DOM (ค่าเริ่มต้น)
  console.log(`someData1 is now: ${someData1.value}`);
});
*/

watchEffect( () => {
  // เรียก callback function ทันทีโดยไม่ต้องรอการอัปเดต DOM
  console.log(`someData3 is now: ${someData3.value}`);
},
{ flush: 'sync' }
);
// หรือใช้เป็น watchSyncEffect
/*
watchSyncEffect( () => {
  // callback function ก่อนการอัปเดต DOM (ค่าเริ่มต้น)
  console.log(`someData1 is now: ${someData1.value}`);
});
*/

setTimeout(() => {
  someData1.value = 'Hello Vue 1!';
  someData2.value = 'Hello Vue 2!';
  someData3.value = 'Hello Vue 3!';
}, 3000);
</script>

<template>
  <div>{{ someData1 }}</div>
  <div>{{ someData2 }}</div>
  <div>{{ someData3 }}</div>
</template>

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

// หยุดทำงานอัตโนมัติ
watchEffect(() => {})

// ...ไม่หยุดทำงานเอง ต้องกำหนดให้หยุดการทำงาน
setTimeout(() => {
  watchEffect(() => {})
}, 100)
</script>

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

const someData = ref('Hello World');
const anotherData = ref(123);

const unwatch = watchEffect(async () => {
  // กรณีนี้  เฉพาะ someData เท่านั้น ที่ watcher ตรวจจับการเปลี่ยนแปลง
  // เพราะเป็นส่วนของ state ที่ถูกเรียกใช้ก่อนรูปแบบ await แรก
  console.log(`someData is now: ${someData.value}`);
  await new Promise(resolve => setTimeout(() => {
    console.log(`anotherData is now: ${anotherData.value}`);  
    return resolve
  },3000));
});

// จำลองการเปลี่ยนแปลงค่าของ someData และ anotherData หลังจาก mount
// กรณีนี้มีผลต่อ watcher เพราะมี someData ที่มีค่าเปลี่ยนแปลง
setTimeout(() => {
  someData.value = 'Hello Vue 3!';
  anotherData.value = 456;
}, 1000);

// จำลองครบ 10 วินาที ไม่ใช้ watcher แล้ว
setTimeout(() => {
  unwatch()
}, 10000);

// จำลองการทำงานหลังจากหยุด watcher c]h;
setTimeout(() => {
  someData.value = 'Watcher Stoped!';
}, 15000);
</script>

<template>
  <div>{{ someData }}</div>
  <div>{{ anotherData }}</div>
</template>

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

const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')
const loading = ref(false)

// watch works directly on a ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {
    loading.value = true
    answer.value = 'Thinking...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Error! Could not reach the API. ' + error
    } finally {
      loading.value = false
    }
  }
})
</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" :disabled="loading" />
  </p>
  <p>{{ answer }}</p>
</template>