useMutationObserver

分类

元素

导出大小

558 B

上次更改

3 个月前

监听对 DOM 树进行的更改。MutationObserver MDN

演示

源代码演练场 (beta)

用法

vue

<script setup lang="ts">
import { useMutationObserver
 } from '@vueuse/core'
import { ref
, useTemplateRef
 } from 'vue'

const el
 = useTemplateRef
('el')
const messages
 = ref
([])

useMutationObserver
(el
, (mutations
) => {
  if (mutations
[0])
    messages
.value
.push
(mutations
[0].attributeName
)
}, {
  attributes
: true,
})
</script>

<template>
  <div
 ref
="el
">
    Hello VueUse
  </div
>
</template>

类型声明

export interface UseMutationObserverOptions
  extends MutationObserverInit,
    ConfigurableWindow {}
/**
 * Watch for changes being made to the DOM tree.
 *
 * @see https://vueuse.org.cn/useMutationObserver
 * @see https://mdn.org.cn/en-US/docs/Web/API/MutationObserver MutationObserver MDN
 * @param target
 * @param callback
 * @param options
 */
export declare function useMutationObserver
(
  target
:
    | MaybeComputedElementRef

    | MaybeComputedElementRef
[]
    | MaybeRefOrGetter
<MaybeElement
[]>,
  callback
: MutationCallback,
  options
?: UseMutationObserverOptions,
): {
  isSupported
: ComputedRef
<boolean>
  stop
: () => void
  takeRecords
: () => MutationRecord[] | undefined
}
export type UseMutationObserverReturn
 = ReturnType
<typeof useMutationObserver
>