Vue.js+Quasar列表仅IDE更新时渲染异常求助

问题根源 #

你在setup()里直接返回了普通数组eventos: []，它不是响应式的。当onSnapshot回调中通过this.eventos.unshift()修改数组时，Vue无法检测到这个变化，所以视图不会更新。而VSCode里修改代码触发热重载时，组件重新渲染，此时数组已经被填充了数据，所以列表会显示出来。

另外，Vue3中选项式API（比如mounted）和组合式API（setup）混用时，虽然setup返回的属性会挂载到组件实例，但普通数组的变更无法触发响应式更新。

修复方案 #

把eventos改成响应式对象，使用Vue3的ref或reactive：

修改后的JavaScript代码 #

<script>
import db from "src/boot/firebase";
import { ref, onMounted } from "vue";
import {
  collection,
  orderBy,
  query,
  onSnapshot,
} from "firebase/firestore";

export default {
  setup() {
    const eventos = ref([]); // 用ref创建响应式数组

    onMounted(() => {
      const ordersRef = collection(db, "eventos");
      const q = query(ordersRef, orderBy("data"));

      const unsubscribe = onSnapshot(q, (snapshot) => {
        snapshot.docChanges().forEach((change) => {
          let eventoChange = change.doc.data();
          eventoChange.id = change.doc.id;
          if (change.type === "added") {
            eventos.value.unshift(eventoChange); // 修改ref包装的数组
          }
        });
      });

      // 组件卸载时取消监听，避免内存泄漏
      return () => unsubscribe();
    });

    return {
      name: "IndexPage",
      eventos,
    };
  },
};
</script>

关键修改点 #

• 用ref([])创建响应式数组，取代普通数组
• 使用组合式API的onMounted钩子，保持代码风格统一
• 修改数组时操作eventos.value，因为ref包装的对象需要通过.value访问
• 添加组件卸载时的监听取消逻辑，防止内存泄漏

备选方案（选项式API风格） #

如果坚持使用选项式API，可直接在data()里声明响应式数组：

<script>
import db from "src/boot/firebase";
import {
  collection,
  orderBy,
  query,
  onSnapshot,
} from "firebase/firestore";

export default {
  data() {
    return {
      eventos: []
    }
  },
  mounted() {
    const ordersRef = collection(db, "eventos");
    const q = query(ordersRef, orderBy("data"));

    this.unsubscribe = onSnapshot(q, (snapshot) => {
      snapshot.docChanges().forEach((change) => {
        let eventoChange = change.doc.data();
        eventoChange.id = change.doc.id;
        if (change.type === "added") {
          this.eventos.unshift(eventoChange);
        }
      });
    });
  },
  beforeUnmount() {
    this.unsubscribe();
  }
};
</script>

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