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

  
    
{{ single.count }}
      
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 });

登录后复制

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渲染完毕前调用回调函数

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

接下来看下代码:

  
    
{{ count }}
      
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 });

登录后复制

得到的结果:

— 1值发生了变更 2 1

在回调函数中,新的值已经变成了2,但获取到的DOM仍然是之前的。默认情况下,flush的值为pre。当值发生变化时,回调函数将在DOM更新之前被触发执行。

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

  
    
{{ count }}
      
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' });

登录后复制

得到的结果:

— 2值发生了变更 2 1

当回调函数被调用时,DOM已经更新完成,此时获取到的DOM是经过数据更改后更新完成的DOM。

以上就是vue3下的watch怎么使用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3229917.html

(0)
上一篇 2025年4月1日 16:23:39
下一篇 2025年4月1日 16:23:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论