js监听页面元素变化

Posted 2023-04-23

参考技术A 该接口用来观察节点变化，MutationObserver是一个构造器，接收一个回调函数callback用来处理节点变化时所做的操作。

var observe = new MutationObserver(mutationCallback);

    var observe = new MutationObserver(mutationCallback);

     observe.observe(dom, config);// 后面介绍config的配置

   var observe = new MutationObserver(mutationCallback);

   observe.disconnect();

    var observe = new MutationObserver(mutationCallback);

    var record = observe.takeRecords();

let config =

    attributes: true, //目标节点的属性变化

    childList: true, //目标节点的子节点的新增和删除

    characterData: true, //如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化

    subtree: true, //目标节点所有后代节点的attributes、childList、characterData变化

;

 <div id="h">123123</div>

    <script>

            window.onload=function()

                // Firefox和Chrome早期版本中带有前缀

                var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

                // 选择目标节点

                var target = document.querySelector('#h'); 

                // 创建观察者对象

                var observer = new MutationObserver(function(mutations)   

                    mutations.forEach(function(mutation)  

                        console.log(mutation); 

                    ); 

                ); 

                // 配置观察选项:

                var config =  attributes: true, childList: true, characterData: true  

                // 传入目标节点和观察选项

                observer.observe(target, config); 

                // 随后,你还可以停止观察

                // observer.disconnect();

                document.getElementById('h').onclick=function()

                // this.style.width="50px"

                this.innerhtml = "888888"

                

            

    </script>

原文链接：https://blog.csdn.net/weixin_42420703/article/details/98334813

vue 监听窗口变化对页面部分元素重新渲染

问题

在处理页面重新渲染时通常的做法是：

1. 用vue-router重新路由到当前页面，页面是不进行刷新的
2. 采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

使用 v-if 重新渲染部分组件或容器

需要重新渲染的内容

<div v-if="render">
  ...
</div>

vue 监听窗口大小发生改变

使用 window.addEventListener() 添加 resize 事件监听窗口变化

new Vue({
  el: ‘#app‘,
  data() {
    return { render: true }
  },
  mounted() {
    window.addEventListener(‘resize‘, this.reload)
  },
  beforeDestroy() {
    window.removeEventListener(‘resize‘, this.reload)
  },
  methods: {
    reload() {
      // 重新渲染
      this.render = false
      this.$nextTick(() => {
        this.render = true
      })
    }
  }
})