vue3,watchEffect和watch监听

1.watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

import { watchEffect,ref,reactive } from 'vue';
// 1-1.监听 ref 声明的值
setup(){
    const count = ref(0);
    watchEffect(()=>{
       console.log(count.value) // 这里的值会被打印两次，0，1
    })
    setTimeout(() => {
      count.value++
      // -> logs 1
    }, 100)
}
// 1-2.监听 reactive 声明的值

setup(){
    const data = reactive({num:0});
    watchEffect(()=>{
       console.log(data.num) // 这里的值会被打印两次，0，1
       console.log(data) // 这里的对象只会被打印一次
    })
    setTimeout(() => {
      data.num++
    }, 100)
}
// 注意： 如果监听函数中打印的是data只会被监听到一次
// 特别注意：watchEffect 并不需要传入具体的监听对象。但是他也同样监听不到 非ref类型，和 getter 函数的变化。

setup(){
    const obj = {age:10};
    watchEffect(()=>{
       console.log(obj.age) // 只能打印一次 10 // 监听不到obj数据的变化
    })
    setTimeout(() => {
      obj.age++
    }, 100)
}

2.watch

watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效

2.1 侦听单一源

侦听器数据源可以是一个具有返回值的 getter 函数，也可以直接是一个 ref：

import { ref,reactive,watch } from 'vue';

// 监听 ref声明的值
setup(){
    const count = ref(0);
    watch(count, (newVal,oldVal)=>{
       console.log(newVal) // 1
       console.log(oldVal) // 0
    })
    setTimeout(() => {
      count.value++
      // -> logs 1
    }, 100)
}

// 监听 getter 也就是说（reactive）声明的值

setup(){
    const data = reactive({
        num:0
    });
    watch(()=>data.num, (newVal,oldVal)=>{
       console.log(newVal) // 1
       console.log(oldVal) // 0
    })
    setTimeout(() => {
      data.num++
      // -> logs 1
    }, 100)
}

2.2 侦听多个源

侦听器还可以使用数组以同时侦听多个源：

import { ref,reactive,watch } from 'vue';

setup(){
  const num = ref(0);
  const number = ref(20);
  watch([num,number],([newNum,newNumber],[oldNum,oldNumber])=>{
      console.log(newNum,oldNum);// 打印 1 0
      console.log(newNumber,oldNumber); // 打印 21 20
    })
    
    setTimeout(()=>{
      num.value++
      number.value++
    },1000)
}