您当前的位置: 首页 > 技术文章 > 前端开发

一文教会你vue3中的watch和watchEffect

作者: 时间:2022-05-24阅读数: 人阅读

watch基本介绍

watch监听某个属性的变化,一旦发生变化,就会触发对应的回调函数执行,在里面进行一些具体的操作,从而达到事件监听的效果。
watch里面具有三个参数:

  1. 第一个参数是:选择要监听的属性。
  2. 第二个参数是:设置的回调函数。即监听到变化时应该执行的函数 。
  3. 第三个参数是:可以设置deep (深度监听) 其值为true和false。还可以设置immediate (是否以当前值执行回调函数) 其值为true和false。

watch使用场景

1. 监听ref定义的一个响应式数据

<script setup>
import { watch, ref } from 'vue'
      let mes = ref('我变化啦')
      //第一种情况 监听ref定义的一个响应式数据
      watch(mes, (newValue, oldValue) => {
        console.log('变化----', newValue, oldValue)   //变化---- 我变化啦 undefined
      }, {immediate: true})  
</script>

我们会发现只打印出变化前的值,因为我们设置了immediate:true,意思是立即监听,还没有获取oldValue的值直接进行监听,所以oldValue报了undefined.

2.监听ref定义的多个响应式数据

import { watch, ref } from 'vue'
      let mes = ref('我变化啦')
      let mes1 = ref('我是第二个变化')
      //第一种情况 监听ref定义的一个响应式数据
      watch([mes,mes1], (newValue, oldValue) => {
        console.log('变化----', newValue, oldValue) 
        //变化---- (2) ['我变化啦', '我是第二个变化']0: "我变化啦"1: "我是第二个变化"length: 2[[Prototype]]: Array(0) []  
      }, {immediate: true})  

3.监听reactive定义的一个响应式数据(注意:此处无法正确的获得oldValue)

let rea=reactive({
        name:'我是谁',
        age:21
      })
      //第三种情况 监听reactive定义的属性
       watch(rea,(newValue,oldValue)=>{
        console.log('rea变化了',newValue,oldValue)
      })

在这里插入图片描述
在这里我点击了“点击修改姓名”,控制台打印如下:
在这里插入图片描述
我们发现了,oldValue中的数据也是最新的,我们获取不到原来的初始数据(初始数据是:张三),这是vue3中的一个小问题吧,现在依旧没有解决办法。

4.监听reactive定义的一个响应式数据(注意:强制开启了深度监听[关不掉])

let rea=reactive({
        name:'我是谁',
        age:21,
        obj : {
          salary : 20000
        }
      })
       watch(rea,(newValue,oldValue)=>{
        console.log('rea变化了',newValue,oldValue)
      })

在这里插入图片描述
在这里我点击了“增薪按钮”,控制台打印如下:
在这里插入图片描述
我们可以看出来salary发生了改变,这是因为强制开启了deep,进行了深度监听,并且deep配置无效!

5.监听reactive定义的一个响应式数据中的某个属性

watch(()=>rea.name,(newValue,oldValue) => {
           console.log('rea的name变化了',newValue,oldValue)  //rea的name变化了 我是谁~ 我是谁
      })

注意:这里第一个参数要写成函数的形式,然后把属性调出来。

6.监听reactive定义的一个响应式数据中的某些属性

      watch([()=>rea.name,()=>rea.age],(newValue,oldValue) => {
           console.log('rea的name或age变化了',newValue,oldValue)  
      })
      })

控制台打印如下:
在这里插入图片描述

7.监听reactive定义的一个响应式数据中的引用数据(需要自己开启deep)

watch(()=>rea.obj,(newValue,oldValue) => {
        console.log('rea的薪资变化了',newValue,oldValue)  
      },{deep:true})

watch的小缺陷

1.监听reactive定义的响应式数据,会强制开启深度监听(deep:true),无法获取正确的oldvalue(变化前的值)。
2. 监听reactive定义的响应式数据中的某个属性(对象形式)时,不会强制开启深度监听,需要自己手动设置(deep:true)才会有效果。

watchEffect基本介绍

不用指明监视哪个属性,监视的回调用到哪个属性,就去监视哪个属性,watchEffect跟computed计算属性有点相似.

watchEffect使用场景

      watchEffect(()=> {
        const x1 = rea.name
        const x2 = rea.obj.salary
        console.log('watchEffect监听的回调执行了...');
      })

持续更新watchEffect…

小结

  1. .watch可以访问新值和旧值,watchEffect不能访问。
  2. watch需要指明监听的对象,也需要指明监听的回调。watchEffect不用指明监视哪一个属性,监视的回调函数中用到哪个属性,就监视哪个属性。
  3. watch只有监听的值发生变化的时候才会执行,但是watchEffect不同,每次代码加载watchEffect都会执行。

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦

天猫38节现货-全屋智能