1.MutationObserver()

創(chuàng)建并返回一個新的 MutationObserver 它會在指定的DOM發(fā)生變化時被調(diào)用。DOM 規(guī)范中的 MutationObserver() 構(gòu)造函數(shù)——是 MutationObserver 接口內(nèi)容的一部分——創(chuàng)建并返回一個新的觀察器，它會在觸發(fā)指定 DOM 事件時，調(diào)用指定的回調(diào)函數(shù)。MutationObserver 對 DOM 的觀察不會立即啟動；而必須先調(diào)用 observe() 方法來確定，要監(jiān)聽哪一部分的 DOM 以及要響應(yīng)哪些更改。——MDN官方文檔

用法：
var observer = new MutationObserver(callback);
參數(shù)：callback
一個回調(diào)函數(shù)，每當(dāng)被指定的節(jié)點或子樹以及配置項有Dom變動時會被調(diào)用。回調(diào)函數(shù)擁有兩個參數(shù)：一個是描述所有被觸發(fā)改動的 MutationRecord 對象數(shù)組，另一個是調(diào)用該函數(shù)的MutationObserver 對象。
返回值：
一個新的、包含監(jiān)聽 DOM 變化回調(diào)函數(shù)的 MutationObserver 對象。

2.用法

比如我們在移動端滾動過程中需要監(jiān)聽滾動高度的變化從而每次刷新滾動器確切的尺寸高度,此時我們可以借助觀察者對象監(jiān)聽其變化，從而實現(xiàn)每次的刷新

    /**
     * @description: 創(chuàng)建觀察者對象監(jiān)聽滾動高度
     */
    // 1.創(chuàng)建一個觀察者對象
    /*
    MutationObserver構(gòu)造函數(shù)只要監(jiān)聽到了指定內(nèi)容發(fā)生了變化，就會執(zhí)行傳入的回調(diào)函數(shù)
    參數(shù)1: mutationList 發(fā)生變化的數(shù)組
    參數(shù)2：observer 觀察者對象
    */
    const observer = new MutationObserver((mutationList, observer) => {
      console.log(this.iscroll.maxScrollY)
      this.iscroll.refresh() // 刷新滾動
      console.log(this.iscroll.maxScrollY)
    })
    // 2.告訴觀察者對象我們需要什么內(nèi)容
    const config = {
      childList: true, // 觀察目標(biāo)子節(jié)點的變化，是否有添加或者刪除
      subtree: true, // 觀察后代節(jié)點，默認(rèn)為 false
      attributeFilter: ['height', 'offsetHeight'] // 觀察特定屬性
    }
    // 3.告訴觀察者對象，我們需要觀察誰，需要觀察什么內(nèi)容
    /*
    參數(shù)1：告訴觀察者對象我們需要觀察誰
    參數(shù)2：告訴觀察者對象我們需要觀察什么內(nèi)容
    */
    observer.observe(this.$refs.wrapper, config)

總結(jié)

以上是生活随笔為你收集整理的MutationObserver()观察者构造函数用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。