JavaScript operates DOM elements and DOM element-related attributes

js dynamically monitors the height changes of dom elements.

related articles

1. Reference article @ALISONLY
2. Reference article @缇茶makewinkk

related information

1. window.onsize = function(){}
   Disadvantages: It can only monitor changes in the viewport but not changes in dom elements.
2. Advantages of MutationObserver
   : MutationObserver can be used to monitor changes in the entire DOM.
3. Disadvantages of ResizeObserver
   : Poor compatibility.

<script>
export default {
    
    
  methods: {
    
    
    handleResize() {
    
    
      console.log("handle resize");
    }
  },
  mounted() {
    
    
    const dom = this.$refs.target.$el;   // 假设this.$refs.target返回是VueComponent对象
    this.observer = new ResizeObserver(this.handleResize);
    this.observer.observe(dom, {
    
     box: "border-box" });
  },
  beforeDestroy() {
    
    
    this.observer.disconnect();
  }
};
</script>

Related dependencies

1. v-resize-observer
   document address @document
2. vue-resize