vue中监听元素的宽高变化(强大的自定义指令)

js中可以给window去绑定缩放事件，从而去监听窗口大小的变化:

window.addEventListener('resize', () => {})

但是有时候窗口的大小并不会变化，变的是元素的大小，好像是没有方法是可以直接监听元素的大小变化的，那如果有这个需求呢？
这次超人鸭也从一个真实需求讲解，如何去监听一个元素的宽高变化，看图:

image.png

在切换侧边栏的收缩时，右边的内容的宽度就会变化，此时我右边是echart，echarts在初始化画完之后，当容器改变大小的时候，echart并不会响应式的重新画图，需要我们手动去调用绘制echart的方法，所以，监听元素的宽度变化是关键。

• 下面超人鸭介绍使用自定义指令的方式，去监听元素的宽高变化:

directives: {  // 使用局部注册指令的方式
  resize: { // 指令的名称
    bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
      let width = '', height = '';
      function isReize() {
        const style = document.defaultView.getComputedStyle(el);
        if (width !== style.width || height !== style.height) {
          binding.value();  // 关键
        }
        width = style.width;
        height = style.height;
      }
      el.__vueSetInterval__ = setInterval(isReize, 300);
    },
    unbind(el) {
      clearInterval(el.__vueSetInterval__);
    }
  }
}
//然后在html中
<div v-resize="resize"></div> // 绑定的resize是一个函数
//在methods中
resize() {  // 当宽高变化时就会执行
  //执行某些操作
}

• 上面就是实现的方法，下面讲一下这个自定义指令的实现:

1. 首先我采用局部注册的方法，然后操作基本都放到bind这个钩子函数中,看一下官方的解释:bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。这个钩子函数只会执行一次，我们这个例子没有涉及到数据的变化，如果有涉及到数据的变化，就应该使用update:所在组件的 VNode 更新时调用
2. 然后我定义两个变量用来存储宽高，并在isReize这个方法中去获取宽高，这里用到document.defaultView.getComputedStyle(el),这个方法可以获取元素的样式，不局限写在行内的style。然后去跟原来的宽高比较，如果不同就执行下面的 binding.value();
3. binding.value就是我们在html中绑定给指令的值，<div v-resize="resize"></div>也就是resize，是个函数。这里很容易以为只能绑定字符串变量，但其实自定义指令的绑定值很强大，可以玩很多种花样，大家可以看看官方文档:自定义指令
4. 最后我再下面赋值了定时器，每300毫秒去执行一次，在unbind这个钩子函数中清除定时器
   到这里就实现了监听一个元素的宽高变化，并执行相应的操作，但如果是针对于echart，还需要在echart实例添加一个方法:

const myChart = echarts.init(document.getElementById(id))
****
myChart.resize()

超人鸭也是第一次尝试vue中的自定义指令，如果有更好的解决方法欢迎指教哦。