的使用监听函数有四种：watch/watchEffect/watchPostEffect/watchSyncEffect。监控系统的两派可以分为两大类：watch和watchEffectwatchwatch(monitorobject,(oldstate,newstate)=>{...})指定要监控的基本类型、数组等，但是代码必须根据类型变化来编写。下一个状态，上一个状态，会通过值前后的值来监听变化。下面介绍一下监控数据类型的差异。(1)基本类型refconstnum=ref(0)watch(num,(next,prev)=>{console.log(next,prev);})(2)Arrayconstarr=ref([])watch(()=>[...arr.value],(next,prev)=>{console.log(next,prev);})(3)objectconststate=reactive({count:0,age:0})watch(()=>({...state}),(next,prev)=>{console.log(next,prev);})watch数组可以将多个元素一起传递，以观察多个元素.但是，有一个警告。如果数组中传递的任何元素发生变化，手表将触发，但如果==同时发生变化，则只触发一次。//同样改变constonClick=()=>{++num1.value++num2.value}//触发一个watch([num1,num2],(next,prev)=>{...})hereIn在这种情况下，只需使用asyncawait来触发2constonClick=async()=>{++num1.valueawaitnextTick()++num2.value}watch([num1,num2],(next,prev)=>{...})观察嵌套对象(deep:true)conststate=reactive({age:0,type:{hoge:0}})watch(()=>state,(next,prev)=>{...},{deep:true})组件创建时立即执行(immediate:true)如果immediate:true为true，监听函数也会在组件创建时执行。watchEffect监视并立即执行传入的函数，同时响应地跟踪其依赖项并在其依赖项更改时重新运行该函数。constcount=ref(0)watchEffect(()=>console.log(count.value))//->logs0setTimeout(()=>{count.value++//->logs1},100)停止监听watchEffect当调用组件的setup()函数或生命周期钩子时，监听器将链接到组件的生命周期，并在组件卸载时自动停止。在某些情况下，您还可以显式调用返回值来停止监听：conststop=watchEffect(()=>{/*...*/})//laterstop()在我们的组件卸载时清除副作用，清除观察者函数或计时器需要onInvalidatewatchEffect(onInvalidate=>{consttoken=performAsyncOperation(id.value)onInvalidate(()=>{//id已更改或观察者已停止。//使先前挂起的异步操作无效token.cancel()})})之所以通过传入一个函数而不是从回调中返回来注册失效回调，是因为返回值对于异步错误处理很重要。在执行数据请求时，副作用函数通常是异步函数：constdata=ref(null)watchEffect(asynconInvalidate=>{onInvalidate(()=>{/*...*/})//weresolve在Promise之前注册的清除函数data.value=awaitfetchData(props.id)})副作用刷新时机默认会在所有组件更新之前执行：watchEffect0onInvalidate1watchEffect1onUpdatedwatchPostEffect和watchSyncEffect有3种类型：1pre(watchEffect),2同步(watchSyncEffect)和3后置(watchPostEffect)。watchPostEffect和watchSyncEffect是watchEffect第二个参数的==刷新属性==。watchEffect(()=>{//},{flush:"sync"//or"post"or"pre"})我们会详细说明每次执行的时间。①pre(watchEffect)这是默认值。在更新组件之前异步调用。也就是说，在生命周期中，在onBeforeUpdate之前调用②sync(watchSyncEffect)在组件即将更新之前或之前同步调用。但是不推荐同步调用monitoreffects，效率低下。通常，它在onBeforeUpdate之前被调用。③post(watchPostEffect)在组件更新后调用。上一次更新更新到更新的时间。命令watchSyncEffect→watchEffect→onBeforeUpdate→watchPostEffect→onUpdated注释代码命令watchEffect((onInvalidate)=>{console.log("watchEffect",a.value);});让一个=参考（0）；上面的代码会执行错误，切换到watchPostEffect不会异步操作watchEffect((onInvalidate)=>{constb=setTimeout(()=>console.log(a.value));Promise.resolve().then(()=>console.log(a.value));});更改a的值不会触发打印两者之间的差异。watch需要监听==具体数据源==，可以获取前后值watchEffect是获取
