时间戳

首页 > 解决方案 > 取消绑定 Vue 指令生命周期中的窗口事件侦听器

javascript - 取消绑定 Vue 指令生命周期中的窗口事件侦听器

问题描述

我刚刚遇到了一个与 Vue 指令中的事件监听相关的问题。我有一个组件，其中包含以下代码：

function setHeaderWrapperHeight() { ... }
function scrollEventHandler() { ... }

export default {
  ...
  directives: {
    fox: {
      inserted(el, binding, vnode) {
        setHeaderWrapperHeight(el);
        el.classList.add('header__unfixed');
        window.addEventListener(
          'scroll',
          scrollEventListener.bind(null, el, binding.arg)
        );
        window.addEventListener(
          'resize',
          setHeaderWrapperHeight.bind(null, el)
        );
      },
      unbind(el, binding) {
        console.log('Unbound');
        window.removeEventListener('scroll', scrollEventListener);
        window.removeEventListener('resize', setHeaderWrapperHeight);
      }
    }
  }
  ...
}

每次更改路由器路径时都会重新渲染此组件，我通过将当前路由路径分配给:keyprop 来实现此行为，因此每当路径更改时，它都会重新渲染。但是问题是尽管事件侦听器没有被删除/销毁，导致可怕的性能问题。那么如何删除事件监听器呢？

标签： javascriptvue.jsvue-directives

解决方案

调用bind函数会创建一个新函数。侦听器没有被删除，因为您传递给removeEventListener的函数与您传递给的函数不同addEventListener。

在指令中的钩子之间进行通信并不是特别容易。官方文档建议使用元素的dataset，尽管在这种情况下看起来很笨拙：

https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments

您可以将侦听器直接作为属性存储在元素上，以便它们在unbind挂钩中可用。

下面的代码采用了稍微不同的方法。它使用一个数组来保存当前绑定到指令的所有元素。window无论指令使用多少次，监听器只注册一次。如果当前未使用该指令，则删除该侦听器：

let foxElements = []

function onClick () {
  console.log('click triggered')

  for (const entry of foxElements) {
    clickHandler(entry.el, entry.arg)
  }
}

function clickHandler (el, arg) {
  console.log('clicked', el, arg)
}

new Vue({
  el: '#app',
  
  data () {
    return {
      items: [0]
    }
  },

  directives: {
    fox: {
      inserted (el, binding) {
        console.log('inserted')
        
        if (foxElements.length === 0) {
          console.log('adding window listener')
          window.addEventListener('click', onClick)
        }

        foxElements.push({
          el,
          arg: binding.arg
        })
      },

      unbind (el, binding) {
        console.log('unbind')
      
        foxElements = foxElements.filter(element => element.el !== el)
        
        if (foxElements.length === 0) {
          console.log('removing window listener')
          window.removeEventListener('click', onClick)
        }
      }
    }
  }
})
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <button @click="items.push(Math.floor(Math.random() * 1000))">Add</button>
  <hr>
  <button
    v-for="(item, index) in items"
    v-fox:example
    @click="items.splice(index, 1)"
  >Remove {{ item }}</button>
</div>

但是，所有这些都假设指令甚至是正确的方法。如果您可以在组件级别执行此操作，那么它可能会变得更简单，因为您拥有可用于存储内容的组件实例。请记住，调用bind会创建一个新函数，因此您需要在某处保留对该函数的引用，以便将其传递给removeEventListener.

推荐阅读