[VUE] 이벤트 핸들러 수식어

성능 문제가 될 경우 passive 수식어를 사용하여 사용자 경험을 개선할 수 있다.

<template>
  <div
    class="parent"
    @wheel.passive="handler">
    <div class="child"></div>
  </div>
</template>

<script>
export default {
  methods: {
    handler(event) {
      for (let i = 0; i < 10000; i += 1){
        console.log(event)
      }
    },
  }
}
</script>

<style scoped lang="scss">
  .parent {
    width: 200px;
    height: 100px;
    background-color: royalblue;
    margin: 10px;
    padding: 10px;
    overflow: auto;
    .child {
      width: 100px;
      height: 2000px;
      background-color: orange;
    }
  }
</style>