Edited at

VueコンポーネントでWindowサイズ変更検知&値取得


実装方法

ブラウザのリサイズはwindowのイベントでVueが直接関与する部分ではないため、コンポーネントの作成時にイベントリスナを追加します。コンポーネント削除時には、忘れずにイベントリスナも削除します。


サンプルコード

<template>

<div>
<p>window width: {{ width }}</p>
<p>window height: {{ height }}</p>
</div>
</template>

<script>
export default {
data: function () {
return {
width: window.innerWidth,
height: window.innerHeight
}
},
methods: {
handleResize: function() {
// resizeのたびにこいつが発火するので、ここでやりたいことをやる
this.width = window.innerWidth;
this.height = window.innerHeight;
}
},
mounted: function () {
window.addEventListener('resize', this.handleResize)
},
beforeDestroy: function () {
window.removeEventListener('resize', this.handleResize)
}
}
</script>

動作がモッサリするようならlodashの_.debounce等を使用し、発火頻度を落とすと良いみたい。