深度解读vue-resize的具体用法

前言

作为一名优秀的前端来说，在平时的造火箭（拧螺丝）过程中，难免要遇到一个情况，就是当窗口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还有这么大的学问在里面，同时对于细节的处理真的很好，路漫漫其修远兮，总有一天，希望会切出五光十色的白