侦听器的基本用法

侦听器（watch）在数据变化时执行逻辑。

基本用法

export default {
  data() {
    return { question: '', answer: '' }
  },
  watch: {
    question(newVal, oldVal) {
      this.answer = '思考中...'
    }
  }
}

Composition API

import { ref, watch } from 'vue'

const question = ref('')
watch(question, (newVal, oldVal) => {
  console.log('变化:', newVal)
})

侦听多个数据源

watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log('名字变化')
})

异步侦听

watch(question, async (newQuestion) => {
  const response = await fetch('/api/answer?q=' + newQuestion)
  answer.value = await response.json()
})

侦听器适合执行异步操作或开销较大的操作。

要点总结

• watch 选项定义侦听器
• 回调接收新值和旧值
• 支持侦听多个数据源
• 可执行异步操作