Vue.js中如何停止监听Cloud Firestore的快照更新？

问题根源是每次切换会话时都创建了新的Firestore实时监听（onSnapshot），但旧的监听没有被取消，导致多个监听同时修改messages数组，出现消息串屏的情况。

实现步骤 #

• 保存当前会话的监听取消函数，切换会话时先取消旧监听，再创建新监听
• 组件销毁时取消最后一个监听，避免内存泄漏

修改代码 #

1. 在组件的data中添加变量存储取消函数：

data() {
  return {
    // 其他原有数据...
    messageUnsubscribe: null // 存储当前消息监听的取消函数
  }
}

2. 修改getChatDetails函数，每次创建新监听前取消旧监听：

async getChatDetails(e) {
  const me = this.getRandomNumber()
  const pairId = e.id
  this.activeChat.id = pairId
  this.activeChat.userName = e.name
  this.activeChat.profilePhoto = e.photo

  // 先取消之前的消息监听（如果存在）
  if (this.messageUnsubscribe) {
    this.messageUnsubscribe()
  }

  // 创建新监听，并保存取消函数
  this.messageUnsubscribe = firestore.collection('chat-groups').doc('messages')
    .collection(`${me}`).doc(`${pairId}`).collection('messages')
    .orderBy('createdAt', 'desc').limit(250)
    .onSnapshot(snapshot => {
      this.messages = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      })).reverse()
    })

  this.chatIsSelected = true
}

3. 组件销毁时取消监听：

beforeDestroy() {
  // 组件销毁前取消最后一个消息监听
  if (this.messageUnsubscribe) {
    this.messageUnsubscribe()
  }
}

为什么之前的尝试无效？ #

firestore.collection(...).onSnapshot()返回的是专属的取消订阅函数，只有调用这个函数才能取消对应的实时监听。你之前重新调用onSnapshot()只是创建了新的监听，根本没触碰到旧的监听实例，自然无法取消。

内容的提问来源于stack exchange，提问作者marlboroone