watch函数用于侦听某个值的变化,当该值发生改变后,触发对应的处理逻辑。
watch监听器的配置参数
1.deep开启深度监听
2.immediate 是否开启初始化检测,默认是值发生变化时,才会执行监听器里面的方法,开启immediate后初始化就执行一次。
一、监听ref类型数据
1、监听单个ref数据
2、监听多个ref数据
二、监听reactive类型数据
监听对象中单个/多个属性
监听 user.more.iPhone 属性,那么只有当iPhone属性发生变更时,才会触发 watch 方法,其他属性变更不会触发 watch 方法。注意,此时的第一个参数是一个箭头函数
同时监听ref基本类型数据和reactive对象中的属性
总结:监听对象时,如果不关心旧值,那么直接监听对象更方便,因为不用手动设置deep为true;如果关心旧值,那么需要使用箭头函数,并序列化,设置deep:true
三、watchEffect
不用指明监视哪个属性,监视的回调用到哪个属性,就去监视哪个属性。与watch的区别:
1.watch可以访问新值和旧值,watchEffect不能访问。
2.watch需要指明监听的对象,也需要指明监听的回调。watchEffect不用指明监视哪一个属性,监视的回调函数中用到哪个属性,就监视哪个属性。
3.watch只有监听的值发生变化的时候才会执行,但是watchEffect不同,每次代码加载watchEffect都会执行。