Vue3中watchEffect、watchPostEffect、watchSyncEffect的区别。一文搞懂，非常细致，没有废话。

 共同点：会立即运行一个函数

一、 watchEffect(函数，对象)

1. 函数体内用到的值（依赖项）发生变化就会执行，与watch不同的是不需要传入监听的值，函数体收到的参数也不同
2. 传入的函数接收一个参数，也是一个函数，该函数会比传入的函数先执行

3. 第二个参数是一个配置对象

可选值：

• immediate：在监听创建时立即触发回调，第一次调用时旧值是undefined
• deep：如果监听的值是对象，强制使用深度遍历，一遍在深层级变更时触发回调
• flush：调整回调函数的刷新时机：

'pre' ：在组件更新更新前运行，默认为'pre'

'post'：在组件更新更新后运行

'sync'：强制效果始终同步触发。然而，这是低效的，应该很少需要。

• onTrack / onTrigger：调试监听的依赖

onTrack(e) {
   // 当监听的值被追踪为依赖时触发，有几个值就会执行几次

   debugger

},

onTrigger(e) {
   // 当监听的值被更改时触发，执行顺序：onTrigger>onInvalidate>函数

    debugger

}

let temp = ref(10);
let height = ref(10);

watchEffect(onInvalidate=>{
   console.log("监听执行：",temp.value,height.value);
   onInvalidate(()=>{
      console.log("onInvalidate先执行");
   })
},{
   onTrack(e) {
    // 当监听的值被追踪为依赖时触发，有几个值就会执行几次
    console.log("onTrack");
  },
  onTrigger(e) {
    // 当监听的值被更改时触发，执行顺序：onTrigger>onInvalidate>函数
    console.log("onTrigger");
  }
})

二、watchPostEffect(函数，对象)

作用：watchEffect() 使用 flush: 'post' 选项时的作用一致

执行顺序：onTrigger>onInvalidate>函数

watchPostEffect(onInvalidate=>{
   console.log("监听后执行：",temp.value,height.value);
   onInvalidate(()=>{
      console.log("onInvalidate后执行");
   })
},{...})

三、watchSyncEffect(函数，对象)

作用：watchEffect() 使用 flush: 'sync' 选项时的作用一致

执行顺序：onTrigger>onInvalidate>函数

watchSyncEffect(onInvalidate=>{
   console.log("监听同步执行：",temp.value,height.value);
   onInvalidate(()=>{
      console.log("onInvalidate同步执行");
   })
},{...})