I am using Vue components to listen for Firebase events, creating the Firebase reference/listeners when they are mounted. However, I want to remove all listeners in the beforeDestroy() lifecycle hook when a user navigates away from the page. Is this the recommended approach for removing Firebase ref/listeners?
getFirebaseRef(path){
return firebase.database().ref(path)
},
beforeDestroy(){
// get firebase ref
let fbPath = `/projects/proj_${this.currentLessonId}/components/${this.component.id}`
this.getFirebaseRef(fbPath)
.then((ref) => {
// remove listener
ref.off("value", (snap) => {
})
ref.off("child_added", (snap) => {
})
ref.off("child_removed", (snap) => {
})
})
},
mounted(){
// get firebase ref
let fbPath = `/projects/proj_${this.currentLessonId}/components/${this.component.id}`
this.getFirebaseRef(fbPath)
.then((ref) => {
// add listener
ref.on("value", (snap) => {
doSomething1()
})
ref.on("child_added", (snap) => {
doSomething2()
})
ref.on("child_removed", (snap) => {
doSomething3()
})
})
},