14/04.MutationObserver.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="vue.js"></script>
    <style>
    pre {
        margin: 0;
        padding: 0.3em;
        border: 1px dashed #2f6fab;
        background-color: #f9f9f9;
        color: black;
        line-height: 1em;
        font-family: verdana, helvetica, sans-serif;
    }
    body{
        margin-top: 100px;
    }
    </style>
</head>

<body>
    <div id="app">
        <h1>vm</h1>
        <input type='text' v-model='a'> {{a}}
    </div>
    <div id='mo'></div>
    <script>
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

    // 选择目标节点
    var target = document.querySelector('#app');

    // 创建观察者对象
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var d = new Date();
            console.log('有变化了：'+mutation.type+',时间：'+d.getTime());
        });
    });

    // 配置观察选项:
    var config = {
        attributes: true,
        childList: true,
        characterData: true
    }

    // 传入目标节点和观察选项
    observer.observe(target, config);

    var vm = new Vue({
        data: {
            a: 1
        },
        el: '#app',
    })
    setTimeout(function() {
        document.getElementById('app').innerHTML = '台湾小凡喜欢 vue.js';
    }, 2000);

    </script>
</body>

</html>