WishMeLz

生活其实很有趣

监听DOM节点变化

Vue

Vue组件加载时会解析template模板中的代码生成一个虚拟DOM对象,保存到内存中。每当函数发送改变时,就会重新解析template中的模板生成新的虚拟DOM对象,然后使用dff算法来对比新的DOM树和原DOM树的区别,找出不同点。然后通过DOM操作来只更新不同的DOM元素。

原生JS

        function changDiv(){
            console.log('修改了!~~~');
        }
        let app = document.querySelector('#app')
        // MutationObserver方法
        let ob = new MutationObserver(changDiv)
        ob.observe(app,{
            attributes:true,  // 监听属性
            childList:true,   // 添加删除子节点
            subtree:true      // 监听子树
        })
        // DOMSubtreeModified放啊
        app.addEventListener('DOMSubtreeModified',function(){
            console.log("被修改了!~~~");
        })