开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第8天，点击查看活动详情

前言

在vue开发中，有些时候我们需要根据某个值的变化去做对应的操作，也就是监听数值的变化，vue中有专门的侦听器实现该功能。下面我们来看下vue中几种侦方式及其用法。

侦听数据

watch

watch用于侦听数据，当数据变化时执行回调函数，我们可以传三个参数给watch():

数据。侦听的数据，可以是对象、基本数据类型等，也可以传多个数据，侦听多个。
回调函数。数据发生变化时调用的函数。该函数也有三个参数，callback(newVal,oldVal,function)，其中function用来清理注册副作用。
参数对象。设置一些可选的参数，达到不同的侦听效果。
immediate:是否立即执行侦听器的回调函数，默认为false，此时回调函数的oldVal为undefined。
deep:是否深度侦听数据，可以用来侦听嵌套层次比较深的对象。
flush:设置回调函数的执行时机，默认回调函数会在组件更新前调用，当设置flush:post回调函数会在组件更新后调用。类似于nextTick()。
onTrack/onTrigger:用来调试侦听器，跟computed类似，读取onTrack,更新onTrigger。

       import { ref, watch } from 'vue';
        const name = ref('tp');
        const age = ref(25);
        //侦听单个
        watch(name, (newVal, oldVal) => {
          console.log(newVal); //tpsz
          console.log(oldVal); //tp
        });
        //侦听多个 用数组表示
        watch([age, name], ([newAge, newName], [oldAge, oldName]) => {
          console.log(newAge); //25
          console.log(oldAge); //26
          console.log(newName); //tpsz
          console.log(oldName); //tp
        });
        //更新时调用watch函数
        name.value = 'tpsz';
        age.value = 26;

watch还能侦听reactive,getter函数等，大家可以试一试。

watchEffect

watchEffect()也用来侦听数据变化，它会立即执行回调函数，就像watch+immediate。该函数有两个参数：

副作用函数，跟watch一样可以用来清除无效的请求等。
flush设置，跟上面提到的一样用于函数执行时机，flush属性值有相应的函数别名：
flush:post---->watchPostEffect
flush:sync---->watchSyncEffect(),数据变化立即执行。

   const name = ref('tp');
    const age = ref(5);
    watchEffect(() => {
      console.log(name.value);
      //第一次打印tp
      //第二次打印tpsz
    });
    name.value = 'tpsz

总结

以上就是侦听数据的两个函数，对比两个函数：

watch默认不会立即执行，需要用immediate设置，watchEffect会立即执行。
watchEffect没有oldVal，不能访问旧值。
日常开发中我们根据具体需求选择适合的方法侦听数据。

vue学习——侦听数据

前言

侦听数据

watch

watchEffect

总结