Vue3中自定义指令监听元素尺寸变化

vue对元素的宽高变化看了一下，基本都是用的定时器解决的，刚好看到JS的一个属性方法，可以专门监测元素的尺寸变化
MDN地址：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

如果想监听元素的其他属性变化，可以使用MutationObserver
MDN地址：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
需要注意的是，虽然MutationObserver也可以监听元素宽高变化，但是对animation等通过css改变的宽高变化监听不到

使用之前可以看一下兼容性
ResizeObserver浏览器兼容性

实现代码如下

directives: {
 resize: {
   mounted(el, binding) {
   	 // 这里使用debounce防抖处理，防抖的延时时间可以通过自定义指令的参数传过来，如`v-resize:300`表示300ms延时
   	 // 也可以将此处延时去掉，放在绑定的函数中自定义
     function debounce(fn, delay = 16) {
       let t = null
       return function () {
         if (t) {
           clearTimeout(t)
         }
         const context = this
         const args = arguments
         t = setTimeout(function () {
           fn.apply(context, args)
         }, delay)
       }
     }
     el._resizer = new window.ResizeObserver(debounce(binding.value, Number(binding.arg) || 16))
     el._resizer.observe(el)
   },
   unmounted(el) {
     el._resizer.disconnect()
   },
 },
},

使用如下

<div class="box" v-resize:200="onResize"></div>

const onResize = () => {
 console.log('is resize')
}