Skip to page content

Mutation 指令

“Mutation” 是 Quasar 提供的一个指令,它可以监听 DOM 树的变化,并在变化发生时调用指定的方法。

底层使用了 Mutation Observer API

用法

建议先阅读 Mutation Observer API 文档,有助于理解本指令的工作原理。

处理函数接收一个参数,类型为 MutationRecord 数组。

捕获所有变化

如果不指定任何修饰符(“once” 除外),Mutation 指令会默认启用所有监听选项。

拖拽示例

下面的示例仅在桌面浏览器中有效,因为它依赖于浏览器的拖拽 API。将带颜色的方块拖到另一个位置,即可查看 Mutation Observer 的监听结果。

撤销/恢复示例

Mutation Observer 的一个典型应用场景是在应用中实现撤销/恢复功能。您可以根据过滤需求监听数据的添加和删除,将变化记录到一个堆栈中,然后利用该堆栈实现撤销操作。撤销过程中产生的变化数据可以存入恢复堆栈。别忘了在常规数据写入撤销堆栈时清空恢复堆栈。