vue-resizeの具体的な使い方を深く解読します。

前言
優秀な先端として、通常のロケット（ねじまき）を作る過程で、どうしても一つの状況が発生します。つまり、ウインドウレスの時、私達はモニターを行います。よくある方案はelement.addEventListener("resize", cb)です。
しかし、カラフルな黒を切ったことがあるあなたにとっては、短期間で何度もリゾーゼウィンドウのサイズを知っているはずです。それなら、私達のこのcbは何度も呼び出されます。このようにしては、性能が悪いです。この時、私達は業務の必要に応じて、節流や震え防止を加えますが、本当に完璧ですか？
まず、私達は自分で手動で傍聴機能を追加します。次に性能問題に注意します。上記のような手ぶれ防止節流を含みます。また、必要でない時に傍聴機能をアンインストールします。最後のポイントは、私達は元素の上で傍聴します。ここで誰かが言っているかもしれません。馬が走ったり、馬が草を食べないようにします。どうしたいですか？vue-resizeという倉庫を紹介します。
一応vue-resizeを理解します。
このライブラリは私がvue-lazyloadを使っていた時に偶然発見しました。中にはvue-resizeを使ってresizeイベントのモニターをしていますので、使い方も簡単です。positionでstaticの要素の下にこのcomponentを使えばいいです。

<template>
 <div class="demo">
 <h1>Hello world!</h1>
 <resize-observer @notify="handleResize" />
 </div>
</template>

<script>
export default {
 methods: {
 handleResize () {
  console.log('resized')
 }
 }
}
</script>

<style scoped>
.demo {
 position: relative;
}
</style>

ここに来て不思議なところがあるという人もいるかもしれません。ここでは下の図のdom構造を見てみます。

IDはresizedです。私たちが監聴する要素です。classはresize-observerです。コンポーネントのために作られたdomです。しかし、私たちのresize監督は上に載せたのではなく、中のobjectですか？でもなく、ojectの中のwindowの中にいます。iframeに似ています。このように何か？外層からの干渉を受けず、上層部にとってはレシゼを監視するだけでいいです。改竄を心配する必要はありません。

もう一言お願いします
基本的に私達はすでにvue-resizeのメリットを知っています。砂箱の保護、全部自動的にアンインストールします。使用者にとって、唯一の要求は元素のpositionはstaticではないです。この倉庫はこの乾燥品だけではないです。作者はvue teamの中です。
まず私達はこのコンポーネントにレシゼ-observerを追加して見られます。tabindexは-1です。これはtabキーがこの要素に調整されないことを意味します。

それと同時に、私達はそのスタイルを見て、scopedと幅の高さは父の要素と同じです。私達が注意したいのは、z-indxは-1で、background-カラー：transparentです。pointer-events:none;opacity：0、基本的にいろんな可能な結果を考えました。

そして、object要素の作成です。ara-hiddenはtrueとtabindexです。ARIA 11に対する処理は本当に細かいです。

おわりに
小さなレスゼにはこのような大きな学問があります。また、細部の処理は本当に素晴らしいです。道は長いです。いつか、色とりどりの白を切りたいです。
ここで、vue-resizeの具体的な使い方を深読みする文章を紹介します。vue-resizeについてもっと多くの内容を解読します。以前の文章を検索したり、次の関連記事を見たりしてください。これからもよろしくお願いします。