Life Cycle

When a Univer application is running, it goes through a series of ordered lifecycle stages. Understanding these lifecycles is crucial for developers, as it helps determine when it's safe to access business instances, DOM elements, or perform time-consuming asynchronous operations. Different stages are suitable for executing various types of initialization, rendering, and performance optimization tasks. By listening to lifecycle changes, developers can respond at the optimal time to system state changes, achieving functionality expansion, performance enhancement, or user experience optimization.

The lifecycle of Univer mainly includes the following four stages:

1. Starting: The system begins initialization, where plugins perform dependency injection and basic configuration.
2. Ready: The first business instance is created, and plugins perform core functionality initialization.
3. Rendered: The interface is rendered for the first time, allowing safe manipulation of the DOM or interface-related initialization.
4. Steady: The system enters a stable state, suitable for executing delayed loading, non-critical tasks, and other optimization operations.

Different types of plugins or components may have different startup timings in their lifecycle, but the overall process follows the order described above. Developers can use lifecycle events to precisely control the timing of functionality loading and execution.

Facade API

Add Listeners

Univer provides a unified event subscription interface, allowing developers to listen for lifecycle changes through the Facade API:

const disposable = univerAPI.addEvent(
  univerAPI.Event.LifeCycleChanged,
  ({ stage }) => {
    if (stage === univerAPI.Enum.LifecycleStages.Steady) {
      // Execute custom logic in the Steady stage
    }
  },
)

Remove Listeners

To remove a listener, you can use the returned disposable object:

disposable.dispose()

Lifecycle Events and Enums

Univer provides the following lifecycle events and enums for developers to use:

• Event Name: univerAPI.Event.LifeCycleChanged

• Lifecycle Stage Enums:

  • univerAPI.Enum.LifecycleStages.Starting
  • univerAPI.Enum.LifecycleStages.Ready
  • univerAPI.Enum.LifecycleStages.Rendered
  • univerAPI.Enum.LifecycleStages.Steady

Example

const disposable = univerAPI.addEvent(
  univerAPI.Event.LifeCycleChanged,
  ({ stage }) => {
    switch (stage) {
      case univerAPI.Enum.LifecycleStages.Starting:
        console.log('The system is initializing...')
        break
      case univerAPI.Enum.LifecycleStages.Ready:
        console.log('The business instance has been created, you can perform core initialization')
        break
      case univerAPI.Enum.LifecycleStages.Rendered:
        console.log('The interface has been rendered, you can safely manipulate the DOM')
        break
      case univerAPI.Enum.LifecycleStages.Steady:
        console.log('The system is stable, you can perform delayed loading and other optimization operations')
        break
    }
  },
)

// Remove the listener
disposable.dispose()