VUE3中watch和watchEffect的用法详解

PIZHANVHUANG

watch和watchEffect都是监听器，但在写法和使用上有所区别。
watch在监听 ref 类型时和监听reactive类型时watch函数的写发有所不一样。
watch在监听 ref 类型时：

1. <script>
   
2. import {ref, watch} from 'vue'
   
3. export default {
   
4.     setup() { 
   
5.         const state = ref(0)
   
6. 
   
7.         watch(state, (newValue, oldValue) => {
   
8.           console.log(`原值为${oldValue}`)
   
9.           console.log(`新值为${newValue}`)
   
10.           /* 1秒后打印结果：
    
11.                   原值为0
    
12.                   新值为1
    
13.           */
    
14.         })
    
15. 
    
16.         // 1秒后将state值+1
    
17.         setTimeout(() => {
    
18.           state.value ++
    
19.         }, 1000)
    
20.     }
    
21. }
    
22. </script>

复制代码

watch在监听 reactive类型时：

1. <script>
   
2. import {reactive, watch} from 'vue'
   
3. export default {
   
4.     setup() { 
   
5.         const state = reactive({count: 0})
   
6. 
   
7.         watch(() => state.count, (newValue, oldValue) => {
   
8.           console.log(`原值为${oldValue}`)
   
9.           console.log(`新值为${newValue}`)
   
10.           /* 1秒后打印结果：
    
11.                   原值为0
    
12.                   新值为1
    
13.           */
    
14.         })
    
15. 
    
16.         // 1秒后将state.count的值+1
    
17.         setTimeout(() => {
    
18.           state.count ++
    
19.         }, 1000)
    
20.     }
    
21. }
    
22. </script>

复制代码

watchEffect 它与 watch 的区别主要有以下几点：

• 不需要手动传入依赖
  
• 每次初始化时会执行一次回调函数来自动获取依赖
  
• 无法获取到原值，只能得到变化后的值
  

1. <script>
   
2. import {reactive, watchEffect} from 'vue'
   
3. export default {
   
4.     setup() { 
   
5.           const state = reactive({ count: 0, name: 'zs' })
   
6. 
   
7.           watchEffect(() => {
   
8.           console.log(state.count)
   
9.           console.log(state.name)
   
10.           /*  初始化时打印：
    
11.                   0
    
12.                   zs
    
13. 
    
14.             1秒后打印：
    
15.                   1
    
16.                   ls
    
17.           */
    
18.           })
    
19. 
    
20.           setTimeout(() => {
    
21.             state.count ++
    
22.             state.name = 'ls'
    
23.           }, 1000)
    
24.     }
    
25. }
    
26. </script>

复制代码

根据以上特征，我们可以自行选择使用哪一个监听器
另：watch和watchEffect监听器在同一个页面中都可以使用多次，对于分别监听多个变量的时候
到此这篇关于VUE3中watch和watchEffect的用法详解的文章就介绍到这了,更多相关VUE3 watch和watchEffect内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

天寿保健护理彰

感谢大大分享~~~~~~~~

么么哒的小熊

顶顶更健康！！！

健不如肥壹

路过，支持一下