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

站长资源 2024/11/25 佚名

2 0 1

前言

作为一名优秀的前端来说，在平时的造火箭（拧螺丝）过程中，难免要遇到一个情况，就是当窗口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就好了，而不用担心它被篡改