Vue.js: ウォッチャーwatch

// ❌ The "Broken" Version：A request is sent for each character
import { ref } from 'vue'

const searchQuery = ref('')

watch(searchQuery, async (newValue) => {
  // A request is sent with every input
  const results = await fetch(`/api/search?q=${newValue}`)
  searchResults.value = await results.json()
})

import { ref, watch } from 'vue'

const searchQuery = ref('')
const searchResults = ref([])

// Image Stabilization：300ms A request is only sent if there are no internal changes.
let timeoutId = null
watch(searchQuery, (newValue) => {
  if (timeoutId) clearTimeout(timeoutId)
  timeoutId = setTimeout(async () => {
    const response = await fetch(`/api/search?q=${newValue}`)
    searchResults.value = await response.json()
  }, 300)
})

import { ref, watch } from 'vue'

const searchQuery = ref('')

// Image Stabilization：300ms Last trigger inside
let debounceId = null
watch(searchQuery, (val) => {
  if (debounceId) clearTimeout(debounceId)
  debounceId = setTimeout(() => {
    console.log('Search:', val)
  }, 300)
})

// Cost-Cutting: Max 1 trigger per second
const scrollY = ref(0)
let lastRun = 0
watch(scrollY, (val) => {
  const now = Date.now()
  if (now - lastRun >= 1000) {
    lastRun = now
    console.log('Scroll:', val)
  }
})

iphone と入力している間は出力なし、停止して 300ms 後に Search: iphone
スクロールは 1 秒に 1 回だけ Scroll: <scrollY> を出力する

import { ref, watch } from 'vue'

const count = ref(0)

watch(
  // 1. Monitoring Source：Reactive data to be monitored
  count,
  // 2. Callback function：(New Value, Old value) => {...}
  (newVal, oldVal) => {
    console.log(`count: ${oldVal} → ${newVal}`)
  },
  // 3. Options: immediate, deep, flush
  { immediate: true, deep: true }
)

const count = ref(0)

// Monitoring ref
watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} → ${newVal}`)
})

const firstName = ref('Alice')
const lastName = ref('Smith')

// Monitor multiple
watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log(`Name: ${newFirst} ${newLast}`)
})

Count: 0
入力欄に 1 と打つと Count: 1、続けて 2 で Count: 12
コンソール：Count changed: 0 → 1、Count changed: 1 → 12

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} → ${newVal}`)
})

import { reactive, watch } from 'vue'

const user = reactive({ name: 'Alice', age: 25 })

// Monitor the entire reactive（Automatic Depth）
watch(user, (newVal, oldVal) => {
  console.log('User changed:', newVal)
})

// ✅ Modifying internal properties also triggers
user.name = 'Bob'  // Trigger

const state = reactive({ user: { profile: { name: 'Alice' } } })

// Monitor only specific properties（Precise Control）
watch(
  () => state.user.profile.name,
  (newVal) => {
    console.log(`Name: ${newVal}`)
  }
)

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

watch(doubleCount, (newVal) => {
  console.log(`Double: ${newVal}`)
})

import { reactive, watch } from 'vue'

const user = reactive({
  profile: { name: 'Alice', age: 25 },
  settings: { theme: 'dark' }
})

// Monitor the entire user（Automatic Depth）
watch(user, (newVal) => {
  console.log('User changed:', JSON.stringify(newVal))
})

// ✅ Modifying any property triggers
user.profile.name = 'Bob'  // Trigger
user.settings.theme = 'light'  // Trigger

watch 直後は何も出力されない（immediate なし）
user.profile.name = 'Bob' → User changed: {"profile":{"name":"Bob","age":25},"settings":{"theme":"dark"}}
settings.theme の変更でも同じログがもう一度出力される

import { ref, watchEffect } from 'vue'

const count = ref(0)
const name = ref('Alice')

// You don't need to specify who to listen for.，Reactive data used within the function body is automatically tracked
watchEffect(() => {
  console.log(`count: ${count.value}, name: ${name.value}`)
  // count Re-execute when changes occur
  // name Re-execute when changes occur
})

import { watchEffect, onCleanup } from 'vue'

watchEffect((onCleanup) => {
  // Set a Timer, Subscribe, Event Listening
  const timer = setInterval(() => {
    console.log('tick')
  }, 1000)
  
  // Cleanup：Called before the next execution or when the component is unloaded
  onCleanup(() => {
    clearInterval(timer)
  })
})

import { ref, watchEffect } from 'vue'

const count = ref(0)
const name = ref('Alice')

// Do not specify a source to listen to，Automatic tracking used in the function body
watchEffect(() => {
  console.log(`count: ${count.value}, name: ${name.value}`)
  // count Re-execute when changes occur
  // name Re-execute when changes occur
})

// Execute Now 1 time
count.value = 1  // Re-execute
name.value = 'Bob'  // Re-execute

実行直後：count: 0, name: Alice
count.value = 1 → count: 1, name: Alice
name.value = 'Bob' → count: 1, name: Bob

const count = ref(0)

// Default：count Change is what triggers it
watch(count, (newVal) => console.log(newVal))  // Will not be executed immediately

// immediate: true: Trigger Immediately 1 time
watch(count, (newVal) => console.log(newVal), { immediate: true })
// ✅ Execute Now：0 → 0

import { ref, watch } from 'vue'

const user = ref({ profile: { name: 'Alice' } })

// Default：ref The object being wrapped .value It is triggered only when the entire replacement is made
watch(user, () => console.log('changed'))  // ❌ user.value.profile.name = 'Bob' Does not trigger

// deep: true：Changes to internal properties also trigger
watch(user, () => console.log('changed'), { deep: true })
// ✅ user.value.profile.name = 'Bob' Trigger

// Default 'pre'：Triggered before the component is updated
watch(source, fn, { flush: 'pre' })

// 'post'：Triggered after a component update（DOM Updated）
watch(source, fn, { flush: 'post' })

// 'sync'：Synchronous Triggering（Not commonly used，Poor performance）
watch(source, fn, { flush: 'sync' })

初期表示：Results: 0 items（入力欄は空）
Shoes と入力して 300ms 経つと /api/search?q=Shoes の件数が Results: N items に反映
入力を消すと Results: 0 items に戻る