Vue 2 响应式数据初始化不完整导致的视图更新延迟问题

位置:首页 / 技术中心 / 杂项

杂项 Admin 2026-02-10 21:09:52 148

         

**问题原因:**

`newVisitStatistics` 在 [data()](file:///f:\qmkj\芜湖湾沚智慧社区后台\src\views\visualizedPlatform\home.vue#L757) 中被初始化为空对象 `{}`,然后在 [getCommunityData()](file:///f:\qmkj\芜湖湾沚智慧社区后台\src\views\visualizedPlatform\home.vue#L888-893) 方法中动态添加属性。Vue 2 的响应式系统无法追踪动态添加的属性,导致第一次刷新时模板中的数据无法正确显示。


**修复方案:**

在 data() 中初始化 `newVisitStatistics` 时,明确列出所有需要的属性并设置默认值,确保它们都是响应式的:


```javascript

newVisitStatistics: {

  thisMonthVisitCount: 0,

  lastMonthVisitCount: 0,

  visitAllCount: 0,

  normalVisitCount: 0,

  abnormalVisitCount: 0,

  abnormalVisitRate: 0

}

```


现在页面第一次刷新时,[L487-528](file:///f:\qmkj\芜湖湾沚智慧社区后台\src\views\visualizedPlatform\home.vue#L487-528) 的走访统计数据就能正常显示了!

18455111359 扫描二维码