как правильно удалить прослушиватель событий в vue 3

У меня есть прослушиватель событий, который получает размеры окна просмотра при монтировании проекта и после каждого события изменения размера.

Я не знаю, как правильно удалить прослушиватель событий.

const { createApp, onMounted, ref } = Vue;
const app = createApp({
  setup() {
    const dim = ref({})
    
    onMounted(() => {
      dim.value = getDimensions()
      // adding the event listener...
      window.addEventListener('resize', debounce(() => {
        // ...but how to remove the event listener correctly?
        console.log('resize')
        dim.value = getDimensions()
      }, 250))
    })
    
    function getDimensions () {
      return {
        w: window.innerWidth,
        h: window.innerHeight
      }
    }
    
    // generic debounce function
    function debounce (func, wait) {
    let timeout
    return function executedFunction (...args) {
      const later = () => {
      timeout = null
          func(...args)
        }
        clearTimeout(timeout)
        timeout = setTimeout(later, wait)
      }
    }

    return {
      dim
    }
  }
});
app.mount("#app");
.navbar {
  position: fixed;
  width: 100%;
  height: 50px;
  top: 0;
  left: 0;
  background-color: #555;
  text-align: center;
}
p {
    color: #fff;
}
<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <div class="navbar">
    <p>
      <span>width: {{ dim.w + ' ' }}</span>
      <span>| height: {{ dim.h }}</span>
    </p>
  </div>
</div>

Как бы вы удалили прослушиватель событий?

Я использую Vue 3 с API композиции.


event-listener vue.js vuejs3 vue-composition-api removeeventlistener
person wittgenstein    schedule 08.04.2021    source источник

Ответы (2)


arrow_upward
2
arrow_downward

почему не в unmounted жизненном цикле

window.removeEventListener("resize", debounce);
person Deniz    schedule 08.04.2021
comment
Убедитесь, что передается результат debounce() (тот же экземпляр передается addEventListener), а не сам debounce. - person tony19; 08.04.2021
comment
@tony19 - это вообще примечание или мне что-то изменить? - person wittgenstein; 08.04.2021
comment
Да, перемена нужна. Кэшируйте результат debounce, передайте его addEventListener и removeEventListener. - person tony19; 08.04.2021

arrow_upward
1
arrow_downward

Обычно я определяю свой метод события за пределами установленного

onResize() {
    debounce(() => {
        // ...but how to remove the event listener correctly?
        console.log('resize')
        dim.value = getDimensions()
      }, 250))
    })
}

затем внутри смонтированного вы можете использовать

onMounted(() => {
  dim.value = getDimensions()
  // adding the event listener...
  window.addEventListener('resize', this.onResize)
})

и внутри beforeUnmount

beforeUnmount(() => {
  window.removeEventListener('resize', this.onResize)
})
person stackoverfloweth    schedule 08.04.2021
comment
он использует vue3, они поменяли хуки - person Deniz; 08.04.2021