vue3 监听

watch

（1）监听ref 状态的变化

const num = ref(1)
watch(num,(newValue,oldValue)=>{
     console.log(newValue,oldValue);//2,1
})
setTimeout(()=>{
    num.value++
},500)

（2）computed

const num = ref(1);
const double = computed(()=> num.value*2);
watch(double,(newValue,oldValue)=>{
     console.log(newValue,oldValue);//4,2
})
setTimeout(()=>{
    num.value++
},500)

(3)reactive对象,默认是深度监听,此时newValue===oldValue

const obj = reactive({
    name:"xx",
    age: 18
})
watch(obj,(newValue,oldValue)=>{
    console.log(newValue===oldValue);//true
    console.log(newValue);//Proxy(Object) {name: 'zhangsan', age: 19}
})
setTimeout(()=>{
    obj.name = "zhangsan";
    obj.age = 19
},500)

想要改变监听层级，可以配置第三个参数：

• 配置对象
• {
  deep: false,//是否深度监听
  once: true/false, //回调是否执行一次，默认false
  immediate: true/false,//是否立即执行，默认false
  }

（4）监听多个数据

const num = ref(1);
const sex = ref("male");
watch([num,sex],(newValue,oldValue)=>{
     console.log(newValue,oldValue);
})
setTimeout(()=>{
    num.value++;
    sex.value = "female"
},500)

(5)监听getter

const obj = reactive({
    name:"xx",
    age: 18
})
watch(()=>obj.age,(newValue,oldValue)=>{
    console.log(newValue,oldValue);//19,18
})
setTimeout(()=>{
    obj.name = "zhangsan";
    obj.age = 19
},500)

watchEffect

（1）不指定依赖的响应式数据，在回调函数中读取了那个响应式数据，就建立一个依赖

（2）会立即执行一次

触发回调时机

• 默认触发回调是在父组件更新之后，DOM更新之前，想要改变回调函数执行时间，可以使用配置参数：flush：‘post’

停止监听

• 顶级同步的监听器在组件被销毁的时候会自动销毁，异步的监听需要手动销毁

const obj = reactive({
    name:"xx",
    age: 18
})
let uwatch;
setTimeout(()=>{
    uwatch=watch(obj,(newValue,oldValue)=>{
        console.log(newValue,oldValue); 
    })
},500)
setTimeout(()=>{
    obj.name = "zhangsan" //执行watch回调
},1500)
setTimeout(()=>{
    uwatch();//销毁监听
},5000)
setTimeout(()=>{
    obj.age = 19;//此时已经没有watch
},7500)