介绍
vue3
中的 watch
是一个组合式的API
, 使用时需要引入。
watch
函数用来侦听特定的数据源,并在回调函数中执行副作用。默认情况是惰性的,也就是说仅在侦听的源数据变更时才执行回调。
定义: watch(source,callback,[option])
参数含义:
source:
需要进行监听的数据(支持string,Object,Function,Array)callback:
监听当前数据发生改变时的回调option:
配置项(支持deep,immediate,flush)
使用场景
<script setup>
// 组合式API, 先按需引入
import {
ref,
reactive,
watch,
} from "vue";
// 定义变量
const age = ref(6);
const user = reactive({
age: 10
})
const student = reactive({
linda: {
lisa: {
age: 20,
}
}
})
// 使用场景一:监听ref定义的变量
watch(
() =>age,
(newVal,oldVal) => {
console.log('改变后的新值为:' + newVal,'改变前的旧值为:' + oldVal);
}
)
// 使用场景二:监听reactive定义的变量
watch(
() => user.age,
(newVal,oldVal) => {
console.log('改变后的新值为:' + newVal,'改变前的旧值为:' + oldVal);
}
);
// 使用场景三:监听多个值
watch(
[() => age,user.age],
([newVal,oldVal],[curVal,preVal]) => {
console.log('改变后的新值为:' + newVal,'改变前的旧值为:' + oldVal);
console.log('改变后的新值为:' + curVal,'改变前的旧值为:' + preVal);
}
)
// 使用场景四: 配置项的使用
// 1. 针对监听对象嵌套很深,很复杂的情况;可以使用深度监听;
// 添加函数的第三个参数: deep: true;
watch(
() => student.linda.lisa.age,
(newVal,oldVal) => {
console.log('改变后的新值为:' + newVal,'改变前的旧值为:' + oldVal);
},
{deep: true} //使用深度监听
);
// 2. 设置立即监听
// 添加函数的第三个参数: immediate: true;
watch(
() => user.age,
(newVal,oldVal) => {
console.log('改变后的新值为:' + newVal,'改变前的旧值为:' + oldVal);
},
{immediate: true} //设置立即监听
);
// 使用场景五: 监听函数 watchEffect的使用
// watchEffect : 与watch相似,都可以监听一个数据源;
// 但是他会在初始化的时候调用一次;
// 他不用像watch一样提前传入依赖项,他会自己自动收集依赖;
// 然后每当依赖项变化的时候,也会重新执行改变函数
// 他无法获取变化前的值,只能获取变化后的值
watchEffect(
() => {
console.log(age);
}
)
</script>