In Vue3; allgemeine Verwendung und Details von watch und watchEffect

einführen

vue3Das in watchist ein kombinierter Typ API, der bei der Verwendung eingeführt werden muss.
watchFunktionen werden verwendet, um auf eine bestimmte Datenquelle zu hören und Nebeneffekte in der Callback-Funktion auszuführen. Der Standardwert ist faul, was bedeutet, dass der Rückruf nur ausgeführt wird, wenn sich die Daten der lauschenden Quelle ändern.
Definition: watch(source,callback,[option])
Parameter Bedeutung:

1. source:Die Daten, die überwacht werden müssen (Support-String, Objekt, Funktion, Array)
2. callback: Hören Sie den Rückruf, wenn sich die aktuellen Daten ändern
3. option：Konfigurationselemente (Unterstützung tief, sofort, bündig)

Szenen zu verwenden

<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>