移除/关闭 Firebase 侦听器

Question

我有监听 Firebase 事件的 Vue 组件，并且在安装它们时创建 Firebase 参考/侦听器。但是当用户离开该页面时，我想删除beforeDestroy()生命周期挂钩中的所有侦听器。这是删除 Firebase 引用/侦听器的“正确”方法吗？

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()
    })
  })
},

Answer 1

您可以随时调用，但如果在同一路径上有多个侦听器，则会变得更加棘手。

ref.off("value")

侦听器返回对该侦听器的引用，所以这就是我的做法。

let listener = ref.on("value", function(snapshot){
//do something
}

ref.off("value", listener)