JavaScript は DOM 要素および DOM 要素関連の属性を操作します

js は dom 要素の高さの変化を動的に監視します。

関連記事

1. 参考記事@ALISONLY
2. 参考記事@缇茶makewinkk

関連情報

1. window.onsize = function(){}
   欠点: ビューポート内の変更のみを監視できますが、DOM 要素内の変更は監視できません。
2. MutationObserverの利点
   : MutationObserver を使用して DOM 全体の変更を監視できます。
3. ResizeObserverの欠点
   : 互換性が低い。

<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>

関連する依存関係

1. v-resize-observer
   ドキュメント アドレス@document
2. vue-サイズ変更