Vue — Lifecycle

Lifecycle hooks

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  unmounted() {
    console.log('unmounted')
  }
}
</script>

Lifecycle diagram

beforeCreate
    ↓
  created
    ↓
beforeMount
    ↓
  mounted
    ↓
beforeUpdate
    ↓
  updated
    ↓
beforeUnmount
    ↓
  unmounted

Common uses

<script>
export default {
  created() {
    // Fetch data when component is created
    this.fetchData()
  },
  mounted() {
    // Access DOM after rendering
    this.$refs.input.focus()
  },
  beforeUnmount() {
    // Cleanup timers, listeners
    clearInterval(this.timer)
  }
}
</script>

Composition API lifecycle

<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('Mounted!')
  fetchData()
})

onUnmounted(() => {
  console.log('Unmounted!')
})
</script>

Error handling

<script>
export default {
  errorCaptured(err, instance, info) {
    console.error('Error:', err)
    return false // Prevent error propagation
  }
}
</script>

Mini Practice

1. Log each lifecycle hook
2. Fetch data in created
3. Access DOM in mounted
4. Clean up in beforeUnmount

Up Next

Continue with Reactivity - Vue's reactivity system.