⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	4
📦 Imports	13
📊 Variables & Constants	1
🟢 Vue Composition API	2
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Variables & Constants
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useMutationObserver/index.ts

📦 Imports

Name	Source
MaybeRefOrGetter	vue
ConfigurableWindow	../_configurable
MaybeComputedElementRef	../unrefElement
MaybeElement	../unrefElement
notNullish	@vueuse/shared
toArray	@vueuse/shared
tryOnScopeDispose	@vueuse/shared
computed	vue
toValue	vue
watch	vue
defaultWindow	../_configurable
unrefElement	../unrefElement
useSupported	../useSupported

---

Variables & Constants

Name	Type	Kind	Value	Exported
observer	MutationObserver | undefined	let/var	*not shown*	✗

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none
watch	watch	none	none

---

Functions

useMutationObserver(target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>, callback: MutationCallback, options: UseMutationObserverOptions): { isSupported: any; stop: () => void; takeRecords: () => MutationRecord[]; }

Code

export function useMutationObserver(
  target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>,
  callback: MutationCallback,
  options: UseMutationObserverOptions = {},
) {
  const { window = defaultWindow, ...mutationOptions } = options
  let observer: MutationObserver | undefined
  const isSupported = useSupported(() => window && 'MutationObserver' in window)

  const cleanup = () => {
    if (observer) {
      observer.disconnect()
      observer = undefined
    }
  }

  const targets = computed(() => {
    const value = toValue(target)
    const items = toArray(value)
      .map(unrefElement)
      .filter(notNullish)
    return new Set(items)
  })

  const stopWatch = watch(
    () => targets.value,
    (targets) => {
      cleanup()

      if (isSupported.value && targets.size) {
        observer = new MutationObserver(callback)
        targets.forEach(el => observer!.observe(el, mutationOptions))
      }
    },
    { immediate: true, flush: 'post' },
  )

  const takeRecords = () => {
    return observer?.takeRecords()
  }

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

  tryOnScopeDispose(stop)

  return {
    isSupported,
    stop,
    takeRecords,
  }
}

• JSDoc:

  /**
   * Watch for changes being made to the DOM tree.
   *
   * @see https://vueuse.org/useMutationObserver
   * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
   * @param target
   * @param callback
   * @param options
   */
  

• Parameters:

• target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>
• callback: MutationCallback
• options: UseMutationObserverOptions
• Return Type: { isSupported: any; stop: () => void; takeRecords: () => MutationRecord[]; }
• Calls:
• useSupported (from ../useSupported)
• observer.disconnect
• computed (from vue)
• toValue (from vue)
• toArray(value) .map(unrefElement) .filter
• watch (from vue)
• cleanup
• targets.forEach
• observer!.observe
• observer?.takeRecords
• stopWatch
• tryOnScopeDispose (from @vueuse/shared)

cleanup(): void

Code

() => {
    if (observer) {
      observer.disconnect()
      observer = undefined
    }
  }

• Return Type: void
• Calls:
• observer.disconnect

takeRecords(): MutationRecord[]

Code

() => {
    return observer?.takeRecords()
  }

• Return Type: MutationRecord[]
• Calls:
• observer?.takeRecords

stop(): void

Code

() => {
    stopWatch()
    cleanup()
  }

• Return Type: void
• Calls:
• stopWatch
• cleanup

---

Interfaces

UseMutationObserverOptions

Interface Code

export interface UseMutationObserverOptions extends MutationObserverInit, ConfigurableWindow {}

---

Type Aliases

UseMutationObserverReturn

type UseMutationObserverReturn = ReturnType<typeof useMutationObserver>;

---