preface

In the MVVM framework, one is to listen to data changes, data driven.

  • We all know how to listen for data changes with object.defineProperties (), or use proxies and reflection.
  • In fact, in MVVM, there are also DOM manipulation scenarios. So, which apis do we use to listen for DOM changes?

When we manipulate the DOM with javascript, we need to notify the DOM to update the view. In VUE, an asynchronous queue is maintained. It’s not like you change the DOM and it’s directly updated to the view.

To listen for DOM changes:

  • polling
  • MutationEvents (mostly obsolete)
  • CSS animations

None of these are very good methods. So, today, let’s introduce some of the more commonly used:

  • MutationObserver

We chose Mutation Observer

An overview of the

The Mutation Observer API is used to monitor DOM changes. The API is notified of any changes to the DOM, such as changes in nodes, changes in attributes, and changes in text content. The Mutation Observer is an asynchronous trigger, in that changes to the DOM are not triggered immediately, but are not triggered until all current DOM operations are complete. This is designed to cope with the DOM’s frequent nature of change.

For example, if 1000 Li elements are inserted consecutively into the document, 1000 insert events are fired consecutively, executing the callback function for each event, which is likely to cause the browser to stall. The Mutation Observer is quite different, triggering only once after all 1000 paragraphs have been inserted.

The Mutation Observer has the following characteristics:

  • Wait for all script tasks to complete before running, that is, in asynchronous mode
  • Encapsulate DOM change records into an array for processing, rather than dealing with DOM changes individually
  • You can observe all changes that occur in the DOM node, or you can observe a certain type of change

use

var observe = new MutationObserver(function(mutations, observer){});var el = document.querySelector('#app');
var  options = {
  'childList': true.'attributes':true}; observer.observe(el, options);// Create and return a MutationObserver instance and listen for changes to el elements.
Copy the code

Small example

The MutationObserver callback function is asynchronous and is called only after all DOM operations have completed.

<div id='target' class='block' name='target'>The first child of target<p>
       <span>The offspring of the target</span>
    </p>
</div>

Copy the code

var target=document.getElementById('target');
var i=0
var observe=new MutationObserver(function (mutations,observe) {
    i++   
});
observe.observe(target,{ childList: true});
target.appendChild(docuemnt.createTextNode('1'));
target.appendChild(docuemnt.createTextNode('2'));
target.appendChild(docuemnt.createTextNode('3'));
console.log(i)  //1 Callback callback times

Copy the code

application

There are many situations where the MutationObserver API can come in handy. Such as:

  • You want to notify a Web application visitor that something has changed on the page he is currently on.
  • You’re developing a new JavaScript framework that dynamically loads JavaScript modules based on DOM changes.

compatibility

See the comments, for compatibility concerns, special post. Can also go to MDN direct view

conclusion

  • The MutationObserver interface provides the ability to monitor changes made to the DOM tree. It is designed as a replacement for the old Mutation Events feature, which is part of the DOM3 Events specification. (MDN)
  • DOM MutationObserver, which responds to DOM changes without affecting browser performance
  • Wait for all script tasks to complete before running, that is, in asynchronous mode