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);}