无需Firebase云函数，在Vue3中遍历Firebase实时数据库用户列表

一、先完成Firebase初始化配置 #

在项目中创建firebase.js文件，配置并导出数据库实例：

// firebase.js
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  // 填入你的Firebase项目配置信息
};

const app = initializeApp(firebaseConfig);
export const db = getDatabase(app);

二、Vue组件实现用户列表渲染 #

下面是完整的组件代码，解决重复渲染问题的核心是用唯一UID作为列表项key，并且每次数据更新时直接替换数据源，让Vue的响应式系统精准更新DOM：

<template>
  <div class="user-list">
    <!-- 用UID作为key，确保列表项唯一标识 -->
    <div v-for="(user, uid) in users" :key="uid" class="user-item">
      <h3>{{ user.nickname }}</h3>
      <p>邮箱：{{ user.email }}</p>
      <p>注册时间：{{ user.createdAt }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { db } from '../firebase';
import { ref as dbRef, onValue } from 'firebase/database';

// 用对象存储用户数据，键为UID，值为用户信息
const users = ref({});

onMounted(() => {
  const usersDbRef = dbRef(db, '/users');
  // 监听/users路径的实时数据变化
  const unsubscribe = onValue(usersDbRef, (snapshot) => {
    const rawData = snapshot.val();
    // 直接替换整个对象，避免累加导致的重复渲染
    users.value = rawData ? { ...rawData } : {};
  });

  // 组件卸载时取消监听，防止内存泄漏和无效更新
  onUnmounted(() => unsubscribe());
});
</script>

<style scoped>
.user-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.user-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  background-color: #f9fafb;
}
</style>

三、如果需要数组格式的用户列表 #

若你更习惯用数组处理（比如排序、筛选），可以将数据库返回的对象转为数组，同样保证用UID作为key：

// 在组件的script部分替换数据源定义和监听逻辑
const userList = ref([]);

onMounted(() => {
  const usersDbRef = dbRef(db, '/users');
  const unsubscribe = onValue(usersDbRef, (snapshot) => {
    const rawData = snapshot.val();
    if (rawData) {
      // 将对象转为[{ uid: 'xxx', ...userInfo }, ...]格式的数组
      userList.value = Object.entries(rawData).map(([uid, user]) => ({
        uid,
        ...user
      }));
    } else {
      userList.value = [];
    }
  });
  onUnmounted(() => unsubscribe());
});

模板对应修改为：

<div v-for="user in userList" :key="user.uid" class="user-item">
  <!-- 内容不变 -->
</div>

四、解决重复渲染的关键要点 #

1. 绑定唯一key：必须用每个用户的UID作为v-for的key，绝对不能用循环索引，否则Vue无法识别列表项的唯一身份，会触发全量重渲染。
2. 直接替换数据源：每次数据更新时，直接用新的对象/数组覆盖原有数据源，而不是在原有数据上push或修改，让Vue的响应式系统只更新变化的部分。
3. 及时取消监听：组件卸载时一定要调用Firebase返回的unsubscribe函数，避免组件销毁后仍接收数据库更新，导致无效渲染和内存泄漏。

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