Lifecycle Hooks — ichigo.js Examples

📊 Example 1 · Chart Integration

Use Case: Initialize a chart library when the element is mounted and clean it up when unmounted.

Hooks Used: @mounted, @updated, @unmounted

Sales Data

methods: {
  initChart() {
    // Initialize chart when element is mounted
    this.$nextTick(() => {
      console.log('Chart initialized');
    });
  },
  updateChart() {
    // Update chart when data changes
    console.log('Chart updated with new data');
  },
  destroyChart() {
    // Clean up chart resources
    console.log('Chart destroyed');
  }
}

📋 Example 2 · Dynamic List with Lifecycle

Use Case: Track when list items are added or removed, useful for animations and logging.

Hooks Used: @mounted, @unmounted

Created: {{ item.created }}

ID: {{ item.id }}

No items yet. Click “Add Item” to get started!

<!-- Each item tracks its lifecycle -->
<div v-for="item in items"
     :key="item.id"
     @mounted="onItemMounted"
     @unmounted="onItemUnmounted">
  ...
</div>

✨ Example 3 · CSS Animation Integration

Use Case: Apply enter/leave animations using CSS transitions with lifecycle hooks.

Hooks Used: @mount, @mounted, @unmount

🎨 Animated Card

This card fades and slides in when shown, and slides out when hidden.

Using CSS transitions with lifecycle hooks for smooth animations!

/* CSS Transitions */
.fade-slide-enter {
  opacity: 0;
  transform: translateY(-30px);
}

.fade-slide-enter-active {
  transition: all 0.5s ease-out;
}

// JavaScript - Two-phase animation
methods: {
  onCardMount($ctx) {
    // Phase 1: Set initial state BEFORE DOM insertion
    $ctx.element.classList.add('fade-slide-enter');
  },
  onCardEnter($ctx) {
    // Phase 2: Trigger transition AFTER DOM insertion
    $ctx.element.offsetHeight; // Force reflow
    requestAnimationFrame(() => {
      $ctx.element.classList.add('fade-slide-enter-active');
      $ctx.element.classList.remove('fade-slide-enter');
    });
  }
}

📝 Event Log

Real-time log of all lifecycle events. Watch how hooks are called when elements are added, updated, or removed.

No events yet. Interact with the examples above to see lifecycle events.