Mutation Directive

v-mutation是 Quasar 提供的一个 vue 指令，它提供了监听 DOM 树发生变化的能力，并在这些变化被触发时调用一个方法。

工作原理是使用了Mutation Observer API。

Mutation API

用法

请先阅读Mutation Observer API页面，有利于理解这个指令是如何工作的。

handler回调函数中有一个参数，参考：MutationRecord。

捕获所有 Catch everything

当v-mutation指令没有添加任何修饰符时，它会默认启用所有修饰符功能。（除了"once"）

拖拽示例

下面的示例只会在桌面浏览器中生效，因为它依赖于浏览器提供的拖拽 api。将带颜色的块拖放到另外一个方框中，以查看效果。

撤销/恢复示例

v-mutation的一个经典用例是在应用中实现撤消/恢复堆栈。您可以根据自己要求监听数据的变化，并将这些变化存储在一个堆栈中，并通过这个堆栈实现撤消/恢复的功能。

视频讲解

若仍有疑惑，请观看视频讲解