前言

作為一名優秀的前端來說，在平時的造火箭（擰螺絲）過程中，難免要遇到一個情況，就是當視窗resize的時候，我們要進行監聽，常見的方案就是 element.addEventListener("resize",cb)

但是對於切過五彩斑斕的黑的你來說，肯定也知道，如果在短時間內多次resize視窗大小，那麼我們這個的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的嗎，也不是，而是在object裡面的window裡面，有點類似於iframe，這樣做有什麼好處呢，相當於我們把resize的監聽放到一個sandbox裡面，不受外層的干擾，而對於上層來說，我只需要監聽resize就好了，而不用擔心它被篡改

再說一句

基本上我們已經知道vue-resize帶來的好處，沙箱保護，全自動解除安裝，對於使用者來說，唯一的要求，就是元素的position不為static，這個庫遠不止這點乾貨，畢竟作者是vue team裡面的。

首先我們可以看到，這個元件新增resize-observer，它的tabindex 為-1，這意味著，tab鍵不會調到這個元素上

同時我們看下它的樣式，scoped和寬度高度跟父元素一樣沒什麼好說的了，我們需要注意的是,z-index為-1，background-color: transparent;pointer-events: none;opacity:0，基本把各種可能的結果都考慮進去了

然後，是object元素的建立，aria-hidden為true和tabindex為-1，可以說對ARIA11的處理，真的很細節

結語

可以看出，小小的resize還有這麼大的學問在裡面，同時對於細節的處理真的很好，路漫漫其修遠兮，總有一天，希望會切出五光十色的白

到此這篇關於深度解讀vue-resize的具體用法的文章就介紹到這了,更多相關vue-resize解讀內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！