Vue项目@fullcalendar/vue首次加载显示异常，切换视图/月份后恢复正常求助

• FullCalendar 初始化时只会读取一次 events 配置的值，你在created生命周期直接往初始空数组push数据时，既没有触发FullCalendar的事件更新监听，此时组件也未完成挂载，无法感知到数组变更，只有切换视图时组件才会重新读取事件数据，所以才会出现首次加载不显示的问题。
• 数组push操作属于对原数组的修改，没有触发FullCalendar配置的响应式更新，FullCalendar仅会对events整体赋值的变更做响应处理。

通用最优方案（兼容Vue2/Vue3） #

通过FullCalendar实例API主动更新事件，可靠性最高：

1. 给FullCalendar组件绑定ref：

<FullCalendar ref="calendarRef" :options="calendarOptions" />

2. 拿到事件数据后，调用官方API更新，建议将原created中的逻辑移到mounted钩子中执行：

// 假设eventList是你拿到的动态事件数据
const calendarApi = this.$refs.calendarRef.getApi()
calendarApi.setEvents(eventList)

响应式配置修改方案 #

如果你不想调用API，直接修改配置即可：
不要使用push修改原数组，直接给calendarOptions.events整体赋值新数组即可：

// 错误写法
this.calendarOptions.events.push(...eventList)
// 正确写法
this.calendarOptions.events = eventList

注意要确保calendarOptions本身是响应式对象：Vue2需要在data选项中返回定义，Vue3需要用reactive包裹。

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