MutationObserver()观察者构造函数用法

1.MutationObserver()

创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。DOM 规范中的 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。——MDN官方文档

• 用法：
  var observer = new MutationObserver(callback);
• 参数：callback
  一个回调函数，每当被指定的节点或子树以及配置项有Dom变动时会被调用。回调函数拥有两个参数：一个是描述所有被触发改动的 MutationRecord 对象数组，另一个是调用该函数的MutationObserver 对象。
• 返回值：
  一个新的、包含监听 DOM 变化回调函数的 MutationObserver 对象。

2.用法

比如我们在移动端滚动过程中需要监听滚动高度的变化从而每次刷新滚动器确切的尺寸高度,此时我们可以借助观察者对象监听其变化，从而实现每次的刷新

    /**
     * @description: 创建观察者对象监听滚动高度
     */
    // 1.创建一个观察者对象
    /*
    MutationObserver构造函数只要监听到了指定内容发生了变化，就会执行传入的回调函数
    参数1: mutationList 发生变化的数组
    参数2：observer 观察者对象
    */
    const observer = new MutationObserver((mutationList, observer) => {
      console.log(this.iscroll.maxScrollY)
      this.iscroll.refresh() // 刷新滚动
      console.log(this.iscroll.maxScrollY)
    })
    // 2.告诉观察者对象我们需要什么内容
    const config = {
      childList: true, // 观察目标子节点的变化，是否有添加或者删除
      subtree: true, // 观察后代节点，默认为 false
      attributeFilter: ['height', 'offsetHeight'] // 观察特定属性
    }
    // 3.告诉观察者对象，我们需要观察谁，需要观察什么内容
    /*
    参数1：告诉观察者对象我们需要观察谁
    参数2：告诉观察者对象我们需要观察什么内容
    */
    observer.observe(this.$refs.wrapper, config)