Vue3中；watch 、watchEffect常用用法及详情介绍

介绍

vue3 中的 watch 是一个组合式的API , 使用时需要引入。
watch 函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是惰性的，也就是说仅在侦听的源数据变更时才执行回调。
定义： watch(source,callback,[option])
参数含义：

1. source: 需要进行监听的数据（支持string,Object,Function,Array）
2. callback: 监听当前数据发生改变时的回调
3. option： 配置项（支持deep,immediate,flush）

使用场景

<script setup>
 // 组合式API， 先按需引入
  import {
    
    
  ref,
  reactive,
  watch,
} from "vue";

  // 定义变量
  const age = ref(6);
  const user = reactive({
    
    
    age: 10
  })
  const student = reactive({
    
    
    linda: {
    
    
      lisa: {
    
    
        age: 20,
      }
    }
  })
  
 //   使用场景一：监听ref定义的变量
  watch(
    () =>age,
    (newVal,oldVal) => {
    
    
      console.log('改变后的新值为：' + newVal,'改变前的旧值为：' + oldVal);
    }
  )
  //   使用场景二：监听reactive定义的变量
  watch(
    () => user.age,
    (newVal,oldVal) => {
    
    
      console.log('改变后的新值为：' + newVal,'改变前的旧值为：' + oldVal);
    }
  );
  // 使用场景三：监听多个值
  watch(
    [() => age,user.age],
    ([newVal,oldVal],[curVal,preVal]) => {
    
    
      console.log('改变后的新值为：' + newVal,'改变前的旧值为：' + oldVal);
      console.log('改变后的新值为：' + curVal,'改变前的旧值为：' + preVal);
    }
  )

  // 使用场景四： 配置项的使用
  // 1. 针对监听对象嵌套很深，很复杂的情况；可以使用深度监听；
  // 添加函数的第三个参数：  deep: true;
  watch(
    () => student.linda.lisa.age,
    (newVal,oldVal) => {
    
    
      console.log('改变后的新值为：' + newVal,'改变前的旧值为：' + oldVal);
    },
    {
    
    deep: true}  //使用深度监听
  );
   // 2. 设置立即监听
  // 添加函数的第三个参数：  immediate: true;
  watch(
    () => user.age,
    (newVal,oldVal) => {
    
    
      console.log('改变后的新值为：' + newVal,'改变前的旧值为：' + oldVal);
    },
    {
    
    immediate: true}  //设置立即监听
  );

  // 使用场景五： 监听函数 watchEffect的使用
  // watchEffect : 与watch相似，都可以监听一个数据源；
  // 但是他会在初始化的时候调用一次；
  // 他不用像watch一样提前传入依赖项，他会自己自动收集依赖；
  // 然后每当依赖项变化的时候，也会重新执行改变函数
  // 他无法获取变化前的值，只能获取变化后的值
  watchEffect(
    () => {
    
    
      console.log(age);
    }
  )
</script>