删除/关闭 Firebase 侦听器

Posted 2023-02-22

【中文标题】删除/关闭 Firebase 侦听器

【英文标题】：Remove/Off for Firebase Listeners

【发布时间】：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()
    )
  )
,

【参考方案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

【讨论】：

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