前言
因为项目需要配置背景水印，仅呈现背景水印这并没有什么难度，但是问题是当背景水印部分的代码通过什么原因被干掉了（例如：打开控制台，给背景水印部分代码加上 display: none），需要检测这个变化重新将水印更新会原状，emmmm，这就有的折腾了。于是乎就发现了 MutationObserver 方法，在此简单笔记一下。
MutationObserver 作用
简单来说，该方法就是用来监听 Dom 变化的，Dom 的任何微小变动它都能接受得到。引用一下阮老师对 Mutation Observer 的特点的描述：
- 它等待所有脚本任务完成后，才会运行（即异步触发方式）
- 它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。
- 它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。
因此在父级元素上挂在一个 MutationObserver 事件监听方法，不就可以做到对背景水印元素变动的监听了么！
背景水印的解决思路
由于是公司内部代码，这里就不做粘贴了，仅说明一下水印的解决思路。
- 检测 DOM 上是否存在水印节点，不存在则新增水印节点
- 为水印节点新增 Mutation Observer 方法，观察其对应属性变化，更新监听
配合 Vue 的逻辑则是编写一个 vue 的全局指令，做到动态更新即可。
MutationObserver 示例
该例子只是对 Mutation Observer API 的学习例子，仅供参考。