vue3 watch监听

基础
 
watch(sortType, () => {
    getData();
});
 
深度
watch(
    (): any => route?.query?.tab, // 1 source: WatchSource<any> 监听的数据源
    () => {       // 2 cb: WatchCallback 监听回调
        const tab = route?.query?.tab;
        if (tab) {
            active.value = tab as Tlabel;
            previewActive.value = tab as Tlabel;
        }
    },
    { deep: true, immediate: true } // 3、options?: WatchOptions 配置
);

1.watch

第一次页面展示的时候不会执行，数据变化的时候才会执行，设置了初始化监听(immediate:true)才会被初始化就监听

参数可以拿到当前值和原始值

可以监听多个数据的变化，用一个侦听器承载

2.watchEffect

页面首次加载就会执行

自动检测内部代码，代码中有依赖便会执行

不需要传递要侦听的内容，会自动感知代码依赖，不需要传递很多参数，只要传递一个回调函数

不能获取之前数据的值，只能获取当前值

一些异步的操作放在这里执行会更合适

3.watch函数的两个坑

监听reactive定义的响应式数据（该数据为一个对象，因为reactive只能定义数组或对象类型的响应式）时：oldValue无法正确获取，会强制开启深度监听，deep配置不生效

监听reactive定义的响应式数据中的某个属性时，且该属性是一个对象，此时的deep生效

import {ref,reactive,watch,watchEffect} from 'vue'
export default {
   name:'demo',
   setup(){
       //数据
       let sum = ref(0)
       let msg = ref('hello')
       let person = reactive({
           name:'zhangsan',
           age:'18',
           job:{
               j1:{
                   salary:20
               }
           }
       })
       //监视(三个参数，第一个是监视的对象，第二个是监视的回调函数，第三个是监视的配置)

       //情况一：监视ref所定义的一个响应式数据
       watch(sum,(newValue,oldValue)=>{
           console.log('sum的值变化了',newValue,oldValue)
       },{immediate:true,deep:true})
       //deep深层次触发（此处设置deep无意义）
 
       //情况二：监视ref所定义的多个响应式数据，写成数组的形式
       watch([sum,msg],(newValue,oldValue)=>{
           console.log('sum或者msg变了',newValue,oldValue)
       })
 
       //情况三：监视reactive所定义的响应式数据
       //若监视的是reactive定义的响应式数据，则无法获得oldValue，会强制开启深度监视
 
        //改变person的任意一个属性都会被监视到
        watch(person,(newValue,oldValue)=>{
            console.log('person改变了',newValue,oldValue)
        }) 
        
        //尝试设置deep:false,关闭深度监听（目的：改变job的值不会被watch监听到）
        //发现deep:false并没有生效，原因是此时watch监视的是reactive定义的响应式对象
        //默认强制开启了深度监听
        watch(person,(newValue,oldValue)=>{
            console.log('person改变了',newValue,oldValue)
        },{deep:false}) 
        
 
      //情况四：监视reactive所定义的响应式数据中的某个属性
       watch(()=>person.name,(newValue,oldValue)=>{
            console.log('person的job改变了',newValue,oldValue)
        })
        watch(()=>person.job,(newValue,oldValue)=>{
            console.log('person的job改变了',newValue,oldValue)
        })
        //从上边我们发现改变name会触发监听，但是改变job不会
        //这是因为name属性的值只是一个简单的基本类型数据，
        //而job属性的值是一个对象，比较深，想要监视到，就要开启深度监视,程序如下：
        watch(()=>person.job,(newValue,oldValue)=>{
            console.log('person的job改变了',newValue,oldValue)
        },{deep:true})//此时job改变，会被监视到，此处的deep配置生效
        //需要和情况三进行区分，此处watch监视的是reactive所定义的对象中的某个属性
        //而情况三watch监视的是reactive所定义的对象
 
        //情况五：监视reactive所定义的响应式数据中的某些属性,写成数组的形式
        watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
            console.log('person的name或age改变了',newValue,oldValue)
        })
 
 
        //watchEffect函数内部所指定的回调中用到的数据只要发生变化，就会重新执行回调
        //只有一个参数，就是回调
        watchEffect(()=>{
            const x1 = sum.value//因为sum是ref定义的响应式数据，需要使用.value调用
            const x2 = person.age
            console.log('watchEffect配置的回调执行了')
        })
 
       //返回一个对象（常用）
       return{
           sum,
           msg,
           person
       }
   }
}