vue3学习（六）watchEffect高级侦听

 watchEffact高级侦听器

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行

import { ref, watchEffect } from 'vue'
const message = ref<string>('悟空')
const message2 = ref<string>('八戒')
watchEffect(() => {
  console.log('message---', message.value)
  console.log('message2---', message2.value)
})

第一个参数就是要运行的副作用函数。这个副作用函数的参数也是一个函数，用来注册清理回调。清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用，例如等待中的异步请求 (参见下面的示例)。

就是在触发监听之前会调用一个函数可以处理一些逻辑

const message = ref<string>('悟空')
const message2 = ref<string>('八戒')
watchEffect((onCleanup) => {
  console.log('message---', message.value)
  console.log('message2---', message2.value)
  onCleanup(() => {
    console.log('before')
  })
})

停止侦听

const stop = watchEffect(() => {})

// 当不再需要此侦听器时:
stop()

第二个参数是一个可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖

flush: "pre" // 组件更新前执行；"sync"强制效果始终同步触发；"post"组件更新后执行

onTrigger  可以帮助我们调试 watchEffect

onTrigger (e){

        debugger

}

const stop = watchEffect((onCleanUp) => {
  console.log('message---', message.value)
  onCleanUp(() => {
    console.log('before')
  })
}, {
  flush: "post",
  onTrigger(e) {
    debugger
  }
})
const stopWatch = () => stop()