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 = null
return 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 = null
return 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 })
