vue3下的监听watch 与vue2中还是有所变化的,监听的数据都是响应式数据。下面介绍几种方式及一些监听配置。
watch(WatcherSource, Callback, [WatchOptions])
参数:
WatcherSource:想要监听的响应式数据。
Callback:执行的回调函数,入参(newValue,oldValue)新旧值的变化。
[WatchOptions]:deep、immediate、flush可选。
// 下面是 WatchOptions 的参数配置相关介绍:
deep:当需要对对象等引用类型数据进行深度监听时,设置deep: true,默认值是false。
immediate:默认情况下watch是惰性的,设置immediate: true时,watch会在初始化时立即执行回调函数一次。
flush:控制回调函数的执行时机,。它可设置为 pre、post 或 sync。
pre:默认值,当监听的值发生变更时,优先执行回调函数(在dom更新之前执行)。
post:dom更新渲染完毕后,执行回调函数。
sync:一旦监听的值发生了变化,同步执行回调函数(建议少用)。
一,监听 ref 声明基础数据类型的响应式数据
// 这里可以监听到数据的变更 及 新旧值的变化
const count = ref(1);
watch(count, (newValue, oldValue) => {
console.log('值发生了变更', newValue, oldValue);
});
二,监听 ref 声明引用数据类型的响应式数据
// 这里监听不到数据的变化,因为是引用数据类型。这里监听的是整个对象数据,内部某一项属性改变是监听不到变化的。
const count = ref({
a: 1,
b: 2
});
const handleClick = function () {
count.value.a = 5;
};
watch(count, (newValue, oldValue) => {
console.log('值发生了变更', newValue, oldValue);
});
下面两个代码块说明使用deep, 及深拷贝的形式去监听:
// 1.引用类型ref直接深度监听:在这添加deep配置参数,即可监听到数据变化
watch(count,(newValue, oldValue) => {
console.log('值发生了变更', newValue, oldValue);
},{ deep: true });
// 值发生了变更 Proxy {a: 5, b: 2} Proxy {a: 5, b: 2}
// 深度监听的需要是这个引用数据类型自身,而不是其中的属性。并且,他只能获取到新值,而获取不到旧的值。
// 2.引用类型ref深拷贝深度监听
const count = ref({
a: 1,
b: 2
});
const handleClick = function () {
count.value.a = 5;
};
watch(
() => {
return { ...count.value };
},
(newValue, oldValue) => {
console.log('值发生了变更', newValue, oldValue);
},
{ deep: true }
);
// 这样把watch的引用类型数据源深拷贝一份,即可完成对新旧值得获取: 值发生了变更 {a: 5, b: 2} {a: 1, b: 2}
三,监听单个数据:reactive
const single = reactive({ count: 1, test: 2 });
const handleClick = function () {
single.count++;
};
watch(
() => single.count,
(newValue, oldValue) => {
console.log('值发生了变更', newValue, oldValue);
},
{ immediate: true }
);
主要是() => single.count,监听的是single中的count,只有这个属性发生了变化才会触发回调函数。这种情况下是可以获取到新旧值的。
四,监听引用类型数据:reactive
<template>
<div class="mine-box">
<div ref="countDom">{{ single.count }}</div>
<button @click="handleClick">按钮</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
const single = reactive({ count: 1, test: { a: 1, b: 2 } });
const handleClick = function () {
single.test.a++;
};
watch(
single,
(newValue, oldValue) => {
console.log('值发生了变更', newValue, oldValue);
},
{ immediate: true }
);
</script>
reactive的数据,用不用deep:true是没有影响的,single中的一个属性发生了变化,都能被监听到,继而执行回调函数。这里只能得到新的值。
五,监听多个数据源
const count = ref(1);
const double = ref(2);
const handleClick = function () {
count.value++;
double.value++;
};
watch(
[count, double],
(newValue, oldValue) => {
console.log('值发生了变更', newValue, oldValue);
},
{ deep: true, immediate: true }
);
有一个值发生了变更,则会触发watch,如果两个值同时发生变更,同样只是触发一次watch的回调函数。如果想变更一格数据就触发一次回调,可以在两个数据变更中间加下nextTick。
immediate: true的理解:默认情况下watch是惰性的,当我们设置immediate: true时,watch会在初始化时立即执行回调函数。
const count = ref(1);
const handleClick = function () {
count.value++;
};
watch(
count,
(newValue, oldValue) => {
console.log('值发生了变更', newValue, oldValue);
},
{ deep: true, immediate: true }
);
下面讲解一个有关watch监听的小小坑(有关flush配置):
1,默认情况下在dom渲染完毕前调用回调函数
默认情况下,flush的值是pre,当监听的值发生变更时,优先执行回调函数(在dom更新之前执行)。这就意味着,如果在回调函数中有相关dom的操作,而参数里面配置了immediate:true,则会报错,因为这个时候dom还没有被渲染,是获取不到dom的。
<template>
<div class="mine-box">
<div ref="countDom">{
{ count }}</div>
<button @click="handleClick">按钮</button>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
count.value++;
};
watch(
count,
(newValue, oldValue) => {
console.log('---', countDom.value.textContent);
console.log('值发生了变更', newValue, oldValue);
},
{ deep: true }
);
</script>
得到的结果:
--- 1
值发生了变更 2 1
可以看到,回调函数中新的值已经变成了2,而获取到的dom还是之前的。说明默认情况下,flush的值是pre,当有值变更时,是在dom更新之前触发回调函数的执行。
2,flush: 'post’在dom渲染完毕后执行回调函数
<template>
<div class="mine-box">
<div ref="countDom">{
{ count }}</div>
<button @click="handleClick">按钮</button>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
count.value++;
};
watch(
count,
(newValue, oldValue) => {
console.log('---', countDom.value.textContent);
console.log('值发生了变更', newValue, oldValue);
},
{ deep: true, flush: 'post' }
);
</script>
得到的结果:
--- 2
值发生了变更 2 1
可以看到,是在dom更新完毕之后才调用的回调函数,这时候获取到的dom是数据变更后更新完毕的dom。
最后总结:
当使用ref创建的响应式数据时。
1,基本数据类型:可以直接监听,可获取新旧值。
2,引用数据类型:需要deep:true深度监听,但是只能获取新值。要想获取新旧值,要想获取新旧值,需要监听目标数据的深拷贝。
当使用reactive创建的响应式数据时。
1,基本数据类型:可以直接指定某个属性进行监听,可以获取到新旧值。
2,引用数据类型:直接监听创建的reactive对象,其中只要有属性变更,都能被监听到。但是它只能获取到新值。
3,reactive创建的响应式数据,深度监听设置是无效的,也就是deep:true/false都是能监听到的。
deep参数
默认是false,只有使用ref创建的响应式引用类型的数据是,才启用。才生效。
immediate参数
默认是false,初始化的时候不执行回调函数。
如果是true,初始化的时候就会执行一次回调函数。
flush参数
默认是'pre',在dom渲染之前执行回调函数,如果有immediate:true时,回调函数有获取dom操作,则会报错,因为初始化时dom还没生成。
设置成'post',则是在dom渲染完毕(监听的数据变更后dom渲染完毕)后,再执行回调函数。
以上就是watch监听的重要内容了,如果有什么要补充的话,欢迎评论区留言,一起研究。多谢点赞。