Vue：销毁时删除事件侦听器

Question

我有一个指示，旨在将固定的类应用于插入的DOM元素，为此，我还将事件侦听器附加到要在用户滚动时运行的window对象。我的问题是，我的元素被销毁时是否应该删除此事件侦听器？我听说滚动事件会影响性能，并且我不确定每次刷新页面时事件侦听器是否会自动销毁（我的应用程序不是SPA，而是带有vue前端的laravel应用程序）。这是我的指令：Vue.directive('scroll-apply-class', {    isLiteral: true,    inserted: (el, binding, vnode) => {        let scrolled = false;        let stickyTop = 300;        setTimeout(function(){            stickyTop = el.offsetTop;            checkPosition();            window.addEventListener('scroll', function(e) {                scrolled = true;            });        }, 2500);        let checkPosition = function(){            if (window.pageYOffset > stickyTop && window.innerWidth > 765) {                el.classList.add(binding.value)            }            else {                el.classList.remove(binding.value)            }           };        let timeout = setInterval(function() {            if (scrolled) {                scrolled = false;                checkPosition();            }        }, 2500);    }});

Answer 1

如果您关心“体面”，那么可以，做正确的事，删除该侦听器。但是从实用主义者的角度来看，也许并非如此。由于您的应用程序不是SPA，因此每次用户单击链接并转到其他页面时，都会自动解决该问题。

但还是要视情况而定。在某些情况下，对您的其中一个页面进行一次长期访问后，有可能多次加载了此指令？如果出现这种情况，则最好正确注销该侦听器。如果否，则该指令仅被加载一次，那么您可以放心地保留它。

Answer 2

您可以在unbind挂钩中的窗口上删除事件侦听器。但是，为了删除事件侦听器，您将需要存储它们的回调。只需将其存储为的属性即可完成此操作el，例如el.scrollCallback：

bind: (el) => {

    el.scrollCallback = () => {

        el.dataset.scrolled = true;

    }

},

unbind: (el) => {

    window.removeEventListener('scroll', el.scrollCallback);

},

然后，在inserted钩子中，只需更新存储scrolled布尔值的方式即可。您可以将其存储在el的数据集中，而不是将其封装在钩子中，以便其他钩子可以访问它：

inserted: (el, binding, vnode) => {

    // Store data in element directly

    el.dataset.scrolled = false;

    let stickyTop = 300;

    setTimeout(function(){

        stickyTop = el.offsetTop;

        checkPosition();

        window.addEventListener('scroll', el.scrollCallback);

    }, 2500);

    // REST OF YOUR CODE HERE

    // Remember to update all references to `scrolled` to `el.dataset.scrolled`

    let timeout = setInterval(function() {

        if (el.dataset.scrolled) {

            el.dataset.scrolled = false;

            checkPosition();

        }

    }, 2500);

}