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)