vue3,watchEffect和watch监听

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

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，1console.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) // 1console.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) // 1console.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 0console.log(newNumber,oldNumber); // 打印 21 20})setTimeout(()=>{num.value++number.value++},1000)
}

                                                        以上是vue3的监听事件！