“突变” 是一个 Quasar 指令，它能够监视 DOM 树的更改，并在触发这些更改时调用相应的方法。

¥“Mutation” is a Quasar directive that provides the ability to watch for changes being made to the DOM tree and call a method when these are triggered.

在底层，它使用 Mutation Observer API。

¥Under the hood, it uses the Mutation Observer API.

用法(Usage)

¥Usage

首先阅读 Mutation Observer API 将最有助于你理解此指令的工作原理。

¥Reading the Mutation Observer API first will be best in your understanding of how this directive works.

处理函数接受一个参数，即 MutationRecord 数组。

¥The handler Function takes one parameter, which is an Array of MutationRecord.

捕获所有内容(Catch everything)

¥Catch everything

通过不指定任何修饰符（“once” 除外），Mutation 指令将启用所有修饰符。

¥By not specifying any modifiers (except for “once”), the Mutation directive will enable all of them.

拖放示例(Drag and drop example)

¥Drag and drop example

由于浏览器支持拖放 API，以下示例仅适用于桌面设备。将彩色方块拖动到其他位置以查看突变监视器的结果。

¥The example below will only work for desktops because of the Drag and drop browser API support. Drag the colored squares to the other location to see the Mutation Observers results.

撤消-重做示例(Undo-redo example)

¥Undo-redo example

Mutation Observer 的一个用例是在应用中实现撤销/重做堆栈。你可以根据自己的过滤需求观察数据的添加和删除。你可以捕获堆栈中的变更，并使用堆栈实现撤消。撤消过程中的任何修改数据都可能进入重做堆栈。将规范化数据放入撤消堆栈时，不要忘记清除重做堆栈。

¥One use-case for the Mutation Observer is implementing an Undo/Redo stack in your application. You can observe additions and removals of data, depending on your filtering requirements. You can capture the mutations in a stack and use the stack to implement an undo. Any mutation data during an undo, can go into a redo stack. Don’t forget to clear the redo stack when normalized data is being put into the undo stack.