如何通过Firebase函数更新Vue组件的data变量？

这个问题我之前也碰到过，核心原因是Firebase回调函数里的this指向和Vue组件实例的this不是同一个！给你几个简单的解决办法：

方法1：提前保存Vue组件的this到变量 #

把组件实例的this先存到一个变量里，在Firebase的回调里用这个变量来访问组件的data或状态：

// 假设这是组件里的方法
fetchTabNames() {
  const vm = this; // 保存组件实例的this
  const tabList = firebase.database().ref('你的目标节点路径');
  
  tabList.on('value', function(snapshot) {
    const newTabs = [];
    // 遍历Firebase子节点
    snapshot.forEach(childSnapshot => {
      newTabs.push(childSnapshot.val());
    });
    // 用vm访问组件的tab_names并更新
    vm.tab_names = newTabs;
  });
}

方法2：使用箭头函数（更简洁） #

箭头函数不会绑定自己的this，它会直接沿用外层作用域的this（也就是Vue组件实例），这样就能直接在回调里用this访问组件数据了：

fetchTabNames() {
  const tabList = firebase.database().ref('你的目标节点路径');
  
  tabList.on('value', (snapshot) => { // 这里用箭头函数
    const newTabs = [];
    snapshot.forEach(childSnapshot => {
      newTabs.push(childSnapshot.val());
    });
    // 直接用this访问组件的tab_names
    this.tab_names = newTabs;
  });
}

额外提醒：记得解绑监听避免内存泄漏 #

如果组件销毁时还保留着Firebase的监听，会造成内存泄漏。可以把监听引用存在data里，在组件销毁钩子中解绑：

data () {
  return {
    authID : '',
    tab_names : ['tab'],
    tabListener: null // 保存监听引用
  }
},
methods: {
  fetchTabNames() {
    const tabList = firebase.database().ref('你的目标节点路径');
    // 把监听函数存起来
    this.tabListener = tabList.on('value', (snapshot) => {
      const newTabs = [];
      snapshot.forEach(childSnapshot => {
        newTabs.push(childSnapshot.val());
      });
      this.tab_names = newTabs;
    });
  }
},
beforeDestroy() {
  if (this.tabListener) {
    const tabList = firebase.database().ref('你的目标节点路径');
    tabList.off('value', this.tabListener); // 解绑监听
  }
}

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