本系列文章合集click me
本系列文章源码click me
watch
侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。
watch()
默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数。
watch参数
watch(watchSource, callback, options?)
watchSource:
侦听源,这个参数可以为以下几种:
- 一个ref
- 一个响应式对象
- 一个有返回值的函数
- 以上类型值组成的数组
callback:
侦听源发生变化时调用的回调函数, 这个回调函数接收三个参数:新值
、旧值
以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用,可以用来清除无效的副作用,例如等待中的异步请求。
当侦听多个来源时,回调函数接受两个数组,分别对应侦听源数组中的新值和旧值。
options
这个可选参数是一个对象,支持以下选项:
immediate
: 在侦听器创建时立即触发回调, 第一次调用时旧值是undefined
deep
: 如果侦听源是对象,强制深度遍历,以便在深层级变更时启动回调flush
: 调整回调函数的刷新时机onTrack / onTrigger
: 调试侦听器的依赖
watch示例
<template>
<div id="app">
<h2>监听一个ref:</h2>
<input type="text" v-model="name" />
<h2>监听一个reactive:</h2>
名称:<input type="text" v-model="info.name" />
品牌:<input type="text" v-model="info.brand" />
尺寸:<input type="text" v-model="info.size" />
<h2>监听一个getter函数</h2>
<input type="text" v-model="getter.num">
<h2>监听以上类型值组成的数组</h2>
ref: <input type="text" v-model="age">
reactive: <input type="text" v-model="user.name">
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, watch } from "vue";
export default defineComponent({
setup() {
// 监听一个ref
const name = ref("温情");
watch(name, (newV, oldV) => {
console.log(`ref发生变化新值为${newV}, 老值为${oldV}`);
});
// 监听一个reactive对象 当直接侦听一个响应式对象时,侦听器自动处于深层级模式:
const info = reactive({
name: "笔记本电脑",
brand: "Dell",
size: 7,
});
watch(info, (newV, oldV) => {
console.log(`reactive对象发生变化`);
});
// 监听一个getter函数
const getter = reactive({ num: 1 });
watch(
() => getter.num,
(newV, oldV) => {
console.log(`getter函数发生变化新值为${newV}, 老值为${oldV}`);
}
);
// 监听以上类型值组成的数组
const age = ref(22)
const user = reactive({
name: '兰陵王',
tel: '12345'
})
watch([age, user], (newV, oldV) => {
console.log('监听的数组发生变化');
console.log('newV', newV);
console.log('oldV', oldV);
}, { immediate: true })
return { name, info, getter, age, user };
},
});
</script>
watchEffect
立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
watchEffect参数
watchEffect(callback)
callback:
页面加载后立即运行这个回调函数,同时响应式地追踪其依赖,并在依赖更改时重新执行
watchEffect 与 watch 区别
watchEffect
只需传递一个回调,不需要传递需要侦听的数据,它默认主动执行一次收集依赖;
而watch
至少需要传递两个参数,需要侦听的数据和回调函数watchEffect
是立即执行的,在页面初始化时会默认执行一次回调函数来收集依赖;
而watch
是惰性的,不会立即执行回调,但可以通过配置immediate
让它默认执行一次watchEffect
获取不到更改前的值; 而watch
可以获取到更改前后的值
watchEffect示例
// 只要count发生变化就会执行一次回调
const count = ref(0);
watchEffect((newV) => {
console.log('watchEffect回调触发', count.value);
})
count.value++;
watchEffect停止侦听
// 只要count发生变化就会执行一次回调
const count = ref(0);
const countWatch = watchEffect((newV) => {
console.log("watchEffect回调触发", count.value);
});
count.value++;
onMounted(() => {
countWatch(); // 停止侦听
});