删除/关闭 Firebase 侦听器答案

【问题标题】：Remove/Off for Firebase Listeners删除/关闭 Firebase 侦听器
【发布时间】：2019-01-24 22:21:19
【问题描述】：

我有 Vue 组件正在侦听 Firebase 事件，并在安装它们时创建 Firebase 引用/侦听器。但是当用户离开该页面时，我想删除 beforeDestroy() 生命周期挂钩中的所有侦听器。这是删除 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()
    })
  })
},

【问题讨论】：

标签： javascript firebase firebase-realtime-database vue.js

【解决方案1】：

你总是可以打电话，但如果你在同一条路径上有多个监听器，它会变得更棘手。

ref.off("value")

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

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

ref.off("value", listener)

【讨论】：

在你的例子中，这是否意味着在“做某事”之后，监听器会关闭？那么“价值”的后续变化呢？
在你调用 ref.off 之前，监听器不会关闭。我只是把它放在那里作为你的听众所做的任何工作的占位符。
您可能必须传递该侦听器变量，但这取决于您要调用 ref.off 的位置
ref.off("value", callback) 像这样传递参数和回调对我不起作用 :( 。只是 .off() 工作得很好。

【解决方案2】：

Firebase 能够分离监听器通过调用 Firebase 数据库引用的 off() 方法来移除回调。

您可以通过将单个侦听器作为参数传递给 off() 来删除它。在不带参数的位置调用 off() 会删除该位置的所有侦听器。

在父监听器上调用 off() 不会自动删除在其子节点上注册的监听器；还必须在任何子侦听器上调用 off() 以删除回调。阅读更多请点击此链接。 https://firebase.google.com/docs/database/web/read-and-write

【讨论】：

谢谢，这应该是公认的答案。