Vue3中的watch执行时机

function useEventListener(target: Element | window, event: string, listener: EventListener, options?: AddEventListenerOptions) {
  if (!target) return

	const add = () => {
		target.addEventListener(event, listener, options)
	}
	const remove = () => {
		target.removeEventListener(event, listener, options)	
	}

	add()
  onUnmounted(remove)

  return stop
}

setup() {
	const root: Ref<HTMLElement | null> = ref(null)

	onMounted(() => {
		useEventListener(root.value, 'click', () => {
			console.log('clicked')
		})
	})
	
	return {
		root
	}
}

type MaybeRef<T> = T | Ref<T> | ComputedRef<T>

function useEventListener(el: MaybeRef<EventTarget|null>, event: string, listener: EventListener, options?: AddEventListenerOptions) {
	if (!target) return

	let cleanup = () => {}
	const stopWatch = watch(
    () => unref(target),
    (el) => {
      cleanup()
      if (!el)
        return

      el.addEventListener(event, listener, options)

      cleanup = () => {
        el.removeEventListener(event, listener, options)
        cleanup = noop
      }
    },
    { immediate: true },
  )

  const stop = () => {
    stopWatch()
    cleanup()
  }
	onUnmounted(stop)
}

<template>
	<p ref="contentRef">content</p>
</template>

<script>
import { ref } from 'vue'

export default {
	setup() {
		const contentRef = ref(null)
		useEvnetListener(titleRef, 'click', () => {
			console.log('clicked')
		})
		return {
			contentRef
		}
	}
}
</script>

<template>
	<p v-if="show" ref="contentRef">content</p>
	<button @click="toggle">change</button>
</template>

<script>
export default {
	setup() {
		const show = ref(false)
		const contentRef = ref(null)
		const toggle = () => {
			show.value = !show.value
		}
		useEventListener(contentRef, 'click', () => {
			console.log('clicked')
		})
		return {
			show,
			contentRef,
			toggle
		}
	}
}
</script>

setup() {
		const show = ref(false)
		const contentRef = ref(null)
		const toggle = () => {
			show.value = !show.value
		}
		watch(() => unref(contentRef), (el) => {
			console.log(el)
		}, { immediate: true })
		return {
			show,
			contentRef,
			toggle
		}
}

null // 第一次
// 切换为显示
<p>content</p>
// 切换为隐藏
null

null // 第一次
// 切换为显示
// 没有任何打印结果
// 切换为隐藏
<p>content<p>
// 切换为显示
null
// 切换为隐藏
<p>content<p>

const doWatch = (source, cb, { immediate, deep, flush }, instance) => {
	// 实际getter会根据source的类型有不同的取值
	let getter
	if (isFunction(source)) {
		getter = () => source
	}
	let oldValue = INITIAL_WATCHER_VALUE
	const job = () => {
		if (cb) {
			const newValue = runner()
			callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
          newValue,
          // pass undefined as the old value when it's changed for the first time
          oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
          onInvalidate
        ])
        oldValue = newValue
		}
	}
	
	let scheduler
  if (flush === 'sync') {
    scheduler = job
  } else if (flush === 'post') {
    scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)
  } else {
    // default: 'pre'
    scheduler = () => {
      if (!instance || instance.isMounted) {
        queuePreFlushCb(job)
      } else {
        // with 'pre' option, the first call must happen before
        // the component is mounted so it is called synchronously.
        job()
      }
    }
  }

	const runner = effect(getter, {
    lazy: true,
    onTrack,
    onTrigger,
    scheduler
  })
	
	// initial run
  if (cb) {
    if (immediate) {
      job()
    } else {
      oldValue = runner()
    }
  }
}

const prodEffectOptions = {
  scheduler: queueJob,
  allowRecurse: true
}

instance.update = effect(() => {
	patch()
}, prodEffectOptions)

const queue = []
const pendingPreFlushCbs = []
const pendingPostFlushCbs = []
const queueJob = (job) => {
	if (
    (!queue.length ||
      !queue.includes(
        job,
        isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
      )) &&
    job !== currentPreFlushParentJob
  ) {
    const pos = findInsertionIndex(job)
    if (pos > -1) {
      queue.splice(pos, 0, job)
    } else {
      queue.push(job)
    }
    queueFlush()
  }
} 

function queueFlush() {
  if (!isFlushing && !isFlushPending) {
    isFlushPending = true
    currentFlushPromise = resolvedPromise.then(flushJobs)
  }
}

function flushJobs(seen?: CountMap) {
  isFlushPending = false
  isFlushing = true
  if (__DEV__) {
    seen = seen || new Map()
  }

  flushPreFlushCbs(seen)

  // Sort queue before flush.
  // This ensures that:
  // 1. Components are updated from parent to child. (because parent is always
  //    created before the child so its render effect will have smaller
  //    priority number)
  // 2. If a component is unmounted during a parent component's update,
  //    its update can be skipped.
  queue.sort((a, b) => getId(a) - getId(b))

  try {
    for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
      const job = queue[flushIndex]
      if (job) {
        if (__DEV__) {
          checkRecursiveUpdates(seen!, job)
        }
        callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
      }
    }
  } finally {
    flushIndex = 0
    queue.length = 0

    flushPostFlushCbs(seen)

    isFlushing = false
    currentFlushPromise = null
    // some postFlushCb queued jobs!
    // keep flushing until it drains.
    if (queue.length || pendingPostFlushCbs.length) {
      flushJobs(seen)
    }
  }
}