vue3下watch的使用方法示例
既然是数据监听，监听的是它的变化。那么就需要能够捕获它的变更，于是监听的数据必然要是响应式数据
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);
});
这种情况下，我监听的是整个数组，它是引用数据类型，内部的某一项发生了变更并不会被监听到。所以watch中的代码并没有执行。
1，引用类型ref直接深度监听
此时，就需要使用深度监听：deep:true
const count = ref({
a: 1,
b: 2
});
const handleClick = function () {
count.value.a = 5;
};
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中的一个属性发生了变化，都能被监听到，继而执行回调函数。
和三中有所不同的是，这种情况下是只能获取到新值的。
五，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 }
);
六，监听多个数据源
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。
七，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渲染完毕）后，再执行回调函数。
总结
到此这篇关于vue3下watch的使用的文章就介绍到这了,更多相关vue3 watch使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue 中 element-ui table合并上下两行相同数据单元格
这篇文章主要介绍了vue 中 element-ui table合并上下两行相同数据单元格,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要为大家介绍了Vue中动态Class的实战示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
vue之el-menu-item如何更改导航菜单栏选中的背景颜色
这篇文章主要介绍了vue之el-menu-item如何更改导航菜单栏选中的背景颜色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue @click与@click.native,及vue事件机制的使用分析
这篇文章主要介绍了vue @click与@click.native,及vue事件机制的使用分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
有的功能需要设置必填项,当然也需要判断是不是添上了,下面这篇文章主要给大家介绍了关于vue el-input设置必填提示功能(单个与多个)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
vue中的任务队列和异步更新策略(任务队列,微任务,宏任务)
这篇文章主要介绍了vue中的任务队列和异步更新策略(任务队列,微任务,宏任务)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本篇文章主要介绍了vue-router history模式下的微信分享小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
图文详解Element-UI中自定义修改el-table样式
elementUI提供的组件间距、样式都比较大,如果直接套用,在页面显示可能就会显得很大,就比如表格,表头、行宽如果不修改的话,遇到列较多的时候,会显得整个页面就不好看,下面这篇文章主要给大家介绍了关于Element-UI中自定义修改el-table样式的相关资料,需要的朋友可以参考下2022-08-08
Vue框架可以很方便的引入各种插件,但是也因此会经常遇到种编译报错,这篇文章主要给大家介绍了关于vue前端编译报错解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vue实现todo应用的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
最新评论