经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3下watch的使用方法示例
来源:jb51  时间:2023/3/20 8:39:47  对本文有异议

既然是数据监听,监听的是它的变化。那么就需要能够捕获它的变更,于是监听的数据必然要是响应式数据

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

  1. const count = ref(1);
  2. watch(count, (newValue, oldValue) => {
  3. console.log('值发生了变更', newValue, oldValue);
  4. });

可以获取到新值和旧值。

二,监听引用类型数据ref:深度监听

  1. const count = ref({
  2. a: 1,
  3. b: 2
  4. });
  5. const handleClick = function () {
  6. count.value.a = 5;
  7. };
  8. watch(count, (newValue, oldValue) => {
  9. console.log('值发生了变更', newValue, oldValue);
  10. });

这种情况下,我监听的是整个数组,它是引用数据类型,内部的某一项发生了变更并不会被监听到。所以watch中的代码并没有执行。

1,引用类型ref直接深度监听

此时,就需要使用深度监听:deep:true

  1. const count = ref({
  2. a: 1,
  3. b: 2
  4. });
  5. const handleClick = function () {
  6. count.value.a = 5;
  7. };
  8. watch(
  9. count,
  10. (newValue, oldValue) => {
  11. console.log('值发生了变更', newValue, oldValue);
  12. },
  13. { deep: true }
  14. );

值发生了变更 Proxy {a: 5, b: 2} Proxy {a: 5, b: 2}

可以注意到的是,深度监听的需要是这个引用数据类型自身,而不是其中的属性。并且,他只能获取到新值,而获取不到旧的值。

2,引用类型ref深拷贝深度监听

  1. const count = ref({
  2. a: 1,
  3. b: 2
  4. });
  5. const handleClick = function () {
  6. count.value.a = 5;
  7. };
  8. watch(
  9. () => {
  10. return { ...count.value };
  11. },
  12. (newValue, oldValue) => {
  13. console.log('值发生了变更', newValue, oldValue);
  14. },
  15. { deep: true }
  16. );

这样把watch的引用类型数据源深拷贝一份,即可完成对新旧值得获取:

值发生了变更 {a: 5, b: 2} {a: 1, b: 2}

三,监听单个数据:reactive

  1. const single = reactive({ count: 1, test: 2 });
  2. const handleClick = function () {
  3. single.count++;
  4. };
  5. watch(
  6. () => single.count,
  7. (newValue, oldValue) => {
  8. console.log('值发生了变更', newValue, oldValue);
  9. },
  10. { immediate: true }
  11. );

这里主要是() => single.count,监听的是single中的count,只有这个属性发生了变化才会触发回调函数。这种情况下是可以获取到新旧值的。

四,监听引用类型数据:reactive

  1. <template>
  2. <div class="mine-box">
  3. <div ref="countDom">{{ single.count }}</div>
  4. <button @click="handleClick">按钮</button>
  5. </div>
  6. </template>
  7.  
  8. <script setup>
  9. import { ref, reactive, watch } from 'vue';
  10. const single = reactive({ count: 1, test: { a: 1, b: 2 } });
  11. const handleClick = function () {
  12. single.test.a++;
  13. };
  14. watch(
  15. single,
  16. (newValue, oldValue) => {
  17. console.log('值发生了变更', newValue, oldValue);
  18. },
  19. { immediate: true }
  20. );
  21. </script>

reactive的数据,用不用deep:true是没有影响的,single中的一个属性发生了变化,都能被监听到,继而执行回调函数。

和三中有所不同的是,这种情况下是只能获取到新值的。

五,immediate: true

默认情况下watch是惰性的,当我们设置immediate: true时,watch会在初始化时立即执行回调函数

  1. const count = ref(1);
  2. const handleClick = function () {
  3. count.value++;
  4. };
  5. watch(
  6. count,
  7. (newValue, oldValue) => {
  8. console.log('值发生了变更', newValue, oldValue);
  9. },
  10. { deep: true, immediate: true }
  11. );

六,监听多个数据源

  1. const count = ref(1);
  2. const double = ref(2);
  3. const handleClick = function () {
  4. count.value++;
  5. double.value++;
  6. };
  7. watch(
  8. [count, double],
  9. (newValue, oldValue) => {
  10. console.log('值发生了变更', newValue, oldValue);
  11. },
  12. { deep: true, immediate: true }
  13. );

有一个值发生了变更,则会触发watch,如果两个值同时发生变更,同样只是触发一次watch的回调函数。

如果想变更一格数据就触发一次回调,可以在两个数据变更中间加下nextTick。

七,flush的配置

1,默认情况下在dom渲染完毕前调用回调函数

默认情况下,flush的值是pre,当监听的值发生变更时,优先执行回调函数(在dom更新之前执行)。这就意味着,如果在回调函数中有相关dom的操作,而参数里面配置了immediate:true,则会报错,因为这个时候dom还没有被渲染,是获取不到dom的。

接下来看下代码:

  1. <template>
  2. <div class="mine-box">
  3. <div ref="countDom">{{ count }}</div>
  4. <button @click="handleClick">按钮</button>
  5. </div>
  6. </template>
  7.  
  8. <script setup>
  9. import { ref, watch } from 'vue';
  10. const count = ref(1);
  11. const countDom = ref(null);
  12. const handleClick = function () {
  13. count.value++;
  14. };
  15. watch(
  16. count,
  17. (newValue, oldValue) => {
  18. console.log('---', countDom.value.textContent);
  19. console.log('值发生了变更', newValue, oldValue);
  20. },
  21. { deep: true }
  22. );
  23. </script>

得到的结果:

--- 1值发生了变更 2 1

可以看到,回调函数中新的值已经变成了2,而获取到的dom还是之前的。说明默认情况下,flush的值是pre,当有值变更时,是在dom更新之前触发回调函数的执行。

2,flush: 'post’在dom渲染完毕后执行回调函数

  1. <template>
  2. <div class="mine-box">
  3. <div ref="countDom">{{ count }}</div>
  4. <button @click="handleClick">按钮</button>
  5. </div>
  6. </template>
  7.  
  8. <script setup>
  9. import { ref, watch } from 'vue';
  10. const count = ref(1);
  11. const countDom = ref(null);
  12. const handleClick = function () {
  13. count.value++;
  14. };
  15. watch(
  16. count,
  17. (newValue, oldValue) => {
  18. console.log('---', countDom.value.textContent);
  19. console.log('值发生了变更', newValue, oldValue);
  20. },
  21. { deep: true, flush: 'post' }
  22. );
  23. </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使用内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号