深入理解 Vue 3 的 watch及用法示例小结

import { watch } from 'vue'

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
// 监听 count
watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变成了 ${newVal}`)
})
// 点击按钮时触发
const increment = () => {
  count.value++
}
</script>
<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

<script setup>
import { reactive, watch } from 'vue'
const state = reactive({
  name: 'Alice',
  age: 25
})
// 监听 state.name
watch(
  () => state.name, 
  (newName, oldName) => {
    console.log(`名字从 ${oldName} 改为 ${newName}`)
  }
)
</script>

<script setup>
import { ref, watch } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
watch(
  [firstName, lastName], 
  ([newFirst, newLast], [oldFirst, oldLast]) => {
    console.log(`${oldFirst} ${oldLast} -> ${newFirst} ${newLast}`)
  }
)
</script>

watch(
  () => state, // 监听整个对象
  (newState, oldState) => {
    // 即使是 state.profile.address 变了，这里也会触发
  },
  { deep: true } 
)

watch(
  () => searchQuery.value,
  (query) => {
    // 页面加载时会立即执行一次，无需等待 query 变化
    fetchResults(query) 
  },
  { immediate: true } 
)

<script setup>
import { ref, watch } from 'vue'
const counter = ref(0)
const stopWatch = watch(counter, (newVal) => {
  if (newVal > 10) {
    console.log('超过10了，停止监听')
    stopWatch() // 停止监听
  }
})
</script>