vue怎么监听元素尺寸变化？

Question

页面上有canvas元素，同时页面是百分比布局的。
所以页面的尺寸会变化，canvas需要响应重绘。
本来监听onresize方法可以重绘，但是页面还有其他操作，比如隐藏部分元素、全屏等。
所以能不能直接监听canvas的父层元素canvas-wrap的尺寸来重绘呢？

<div id="canvas-wrap">
    <canvas></canvas></div>

Answer 1

css-element-queries比较成熟的解决方案当然更简单的可以自己写个指令进行轮询Vue.directive('resize',&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;bind(el,&nbsp;binding)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;width&nbsp;=&nbsp;'',&nbsp;height&nbsp;=&nbsp;'';&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;get()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;style&nbsp;=&nbsp;document.defaultView.getComputedStyle(el);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(width&nbsp;!==&nbsp;style.width&nbsp;||&nbsp;height&nbsp;!==&nbsp;style.height)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binding.value({width,&nbsp;height}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width&nbsp;=&nbsp;style.width; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height&nbsp;=&nbsp;style.height; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el.__vueReize__&nbsp;=&nbsp;setInterval(get,&nbsp;200); &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;unbind(el)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearInterval(el.__vueReize__); &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;});使用方式<div&nbsp;id="canvas-wrap"&nbsp;v-resize="redraw"> &nbsp;&nbsp;&nbsp;&nbsp;<canvas></canvas></div>这样轮询到div的width,height发生变化就会触发redraw事件了，directive是随手写的，测了下有效，没实用过,只提供个思路