在destroy上的指令中使用vue removeListener

Question

我得到了一个用于动画DOM中元素的指令，该指令如下所示：

Vue.directive('animate', {
    bind(el, binding) {
        let start = (binding.value)?binding.value.start:{y: 50, autoAlpha: 0};
        TweenMax.set(el, start);
    },
    inserted: function(el, binding) {
        let end = (binding.value)?binding.value.end:{y: 0, autoAlpha: 1};
        end.ease = Quart.easeOut;
        end.onComplete = () => {
            el.removeAttribute("style");
            el.classList.add("animation-done");
        };

        const f = function() {
            console.log("scrolling");
            if (InViewPort(el)) {
                window.removeEventListener('scroll', f);
                TweenMax.to(el, 1.5, end);
            }
        };

        window.addEventListener('scroll', f);
        f();
    }
});

在组件中调用该指令，如下所示：

v-animate="{start: {y: 50, autoAlpha: 0}, end: {y: 0, autoAlpha: 1, delay: index * 0.5}}"

这给了我想要的灵活性，只有一个问题。事件监听器在inserted范围内，并且在unbind挂钩上不可用。

也许指令不是进入Vue的方式，有没有人有一些建议如何处理这个？