跳到主要内容

useMutationObserver

分类
导出大小
558 B
上次更改
3 个月前

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

演示

用法

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>

类型声明

ts
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
>

来源

源文件演示文档

贡献者

Anthony Fu
IlyaL
Anthony Fu
丶远方
Jelf
Issayah
青椒肉丝
我想静静
OrbisK
Pim
jdm1219
chirokas
huodoushigemi
AaronBeaudoin
laozei
karma
Shinigami
Alex Kozack
Antério Vieira
zhong666

更新日志

v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
v12.3.0
021d0 - feat(toArray): 新的实用函数 (#4432)
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
489a9 - fix: 清理前停止监听 (#4037)
v10.8.0
98fac - feat: 允许多个目标 (#3741)
v10.6.0
f9136 - feat: 添加 takeRecords 函数 (#3480)
v10.5.0
8167b - feat: 使用 MaybeComputedElementRef (#3430)

根据 MIT 许可证发布。