Vue2中使用Vuefire绑定Firebase数据时监听加载完成的钩子方法

不需要放弃声明式绑定的简洁写法，Vuefire 针对Vue 2版本专门提供了数据绑定完成的切入时机，常用有两种实现方案：

方案1：使用全局绑定完成生命周期钩子 #

Vuefire 内置了 firebaseBindingsReady 生命周期，会在所有声明式配置的Firebase绑定全部完成数据拉取后触发，此时可以直接访问到完整的绑定数据：

import { db } from '../firebase/db'
export default {
    data: () => ({
        cats: []
    }),
    firebase: {
        cats: db.ref('cats')
    },
    firebaseBindingsReady() {
        // 此处this.cats已完成从Firebase的加载，可直接遍历
        this.cats.forEach(cat => {
            // 你的业务逻辑
        })
    }
}

方案2：为单个绑定配置就绪回调 #

如果只需要监听cats单条绑定的完成时机，不需要等所有绑定加载完成，可以把绑定项配置为对象格式，单独传入ready回调：

import { db } from '../firebase/db'
export default {
    data: () => ({
        cats: []
    }),
    firebase: {
        cats: {
            source: db.ref('cats'),
            ready: () => {
                // cats加载完成，直接使用
                this.cats.forEach(cat => {
                    // 你的业务逻辑
                })
            }
        }
    }
}

如果需要适配更灵活的触发场景，也可以通过watch监听cats的变化，配合标志位控制逻辑只在首次加载完成后执行，以上两种内置方案已经可以覆盖绝大多数常规需求。

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