TLDR:

1
2

let id = window.requestAnimationFrame(fancyFunctionHere)
window.cancelAnimationFrame(id);

Now for the longer version. Technically in Vue.js you might have components/mixins that use window.requestAnimationFrame. Since the fancyFunctionHere is used as a callback, everytime you call window.requestAnimationFrame you are going to get a new id that you should use on the destroy method to stop it.

Unfortunately this is not imediately clear on MDN so hopefully my documentation edit with the comment in the code example goes trough.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
    created() {
        this.id = window.requestAnimationFrame(
            this.fancyFunctionHere
        );
    },

    destroyed() {
        window.cancelAnimationFrame(this.id);
        this.id = undefined;
    },

    data() {
        return {
            id: undefined
        }
    }

    methods: {
        fancyFunctionHere() {

        }
    }
}