Vue侦听器Watch

31. Vue侦听器Watch

1. 定义

Watch是Vue.js提供的一个观察者模式，用于监听数据的变化并执行相应的回调函数。虽然计算属性Computed在大多数情况下更合适，但有时也需要一个自定义的侦听器Watch。因为在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。

2. 基本用法

在Vue组件中，我们可以使用watch来监听数据的变化并执行回调函数，示例如下：

<template><div><div><label for="qu">问题： </label><input type="text" id="qu" placeholder="请输入问题" v-model="question"></div><div>{{ answer }}</div></div>
</template>
<!-- vue2 -->
<script>
import axios from "axios"
export default {data() {return {question: '',answer: "no answer"}},watch:{question(newValue, oldValue) {this.answer = "Thinking..."this.debounceGet()}},  created() {// 接收防抖获取数据函数this.debounceGet = this.debounce(this.getAnswer, 500)},  methods:{// 调用接口获取数据async getAnswer() {try{const res = await axios.get('https://yesno.wtf/api')this.answer = await res.data.answer} catch(error) {this.answer = error}},// 防抖函数控制debounce(fn, wait) {let timer = nullreturn function() {if(timer)clearTimeout(timer)timer = setTimeout(() => {fn.apply(this, arguments)}, wait);}}}
}
</script><!-- vue3 -->
<script setup>
import axios from "axios"
import { ref, watch } from "vue"const question = ref("")
const answer = ref("no answer")// 异步获取数据
const getAnswer = async() => {try{const res = await axios.get('https://yesno.wtf/api')answer.value = await res.data.answer} catch(error) {answer.value = error}
}
// 防抖函数
const debounce = (fn, wait) => {let timer = nullreturn function() {if(timer)clearTimeout(timer)timer = setTimeout(() => {fn.apply(this, arguments)}, wait);}
}
// 接收防抖获取数据函数
const debounceGet = debounce(getAnswer, 500)// 侦听器
watch(question, (newValue, oldValue) => {answer.value = "Thinking..."debounceGet()
})
</script>

3. watch高级用法

watch侦听器还有三个属性：

• handler：watch中需要具体执行的方法。
• immediate：在组件初始化时立即执行hanler中代码。
• deep：深度监听，可以监听对象或数组内部属性的变化。

<!-- vue2 -->
<script>
export default {data() {return {obj: {name: "Jack",age: 20}}},watch:{obj: {handler(newValue, oldValue){console.log("obj被改变");},immediate: true,deep: true}},methods:{setName(){this.obj.name = "Jarry"}}
}
</script>

在vue3中，直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发：

// vue3
const obj = reactive({name: "Jack",age: 20
})
const setName = () => {obj.name = "Bob"
}
//直接传入响应式对象，所有子孙元素改变都会侦听到，默认深度监听
watch(obj, (newValue, oldValue) => {console.log("obj被改变");
})
//传入一个getter函数，只会侦听到对应的属性的变化，默认深度监听
watch(() => obj.name, (newValue, oldValue) => {console.log("obj.name被改变");
})
// 传入deep属性，强制监听
watch(() => obj.age, (newValue, oldValue) => {console.log("obj.age被改变");
}, { deep: true })setName();//obj被改变
obj.age++

watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。

我们可以通过传入 immediate: true 选项来强制侦听器的回调立即执行：

// 传入immediate, 立即执行
watch(obj, (newValue, oldValue) => {console.log("立即执行");
}, { immediate: true })