Vue.js ライフサイクルフック

// カウンターコンポーネント
const CounterComponent = {
  template: `
    <div class="counter">
      <h3>カウンター</h3>
      <div class="count">{{ count }}</div>
      <div>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
        <button @click="reset">リセット</button>
      </div>
      
      <div class="logs">
        <h4>ライフサイクルログ</h4>
        <div v-for="(log, index) in logs" 
             :key="index" 
             :class="['log', log.type]">
          {{ log.message }}
        </div>
      </div>
    </div>
  `,

  data() {
    return {
      count: 0,
      logs: [],
      updateCount: 0
    }
  },

  methods: {
    increment() {
      this.count++
      this.updateCount++
    },
    
    decrement() {
      this.count--
      this.updateCount++
    },
    
    reset() {
      this.count = 0
      this.updateCount++
    },
    
    addLog(message, type) {
      this.logs.push({
        message: `${new Date().toLocaleTimeString()}: ${message}`,
        type: type
      })
    }
  },

  // マウント時の処理
  mounted() {
    this.addLog('コンポーネントがマウントされました', 'mounted')
  },

  // 更新時の処理
  updated() {
    // ログの更新による無限ループを防ぐため、更新回数で判定
    if (this.updateCount > 0) {
      this.addLog(`カウンターが更新されました: ${this.count}`, 'updated')
      this.updateCount = 0
    }
  },

  // アンマウント時の処理
  unmounted() {
    this.addLog('コンポーネントがアンマウントされました', 'unmounted')
  }
}

// メインアプリケーション
const app = Vue.createApp({
  components: {
    'counter-component': CounterComponent
  }
})

// マウント
app.mount('#app')