---
source: https://iinventedlight.com/library/notes/vue-lifecycle-hooks.md
title: "Lifecycle hooks in Vue"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0, text only (vuejs/docs); prose restates or closely paraphrases cited source lines"
license_family: vue-docs-ccby
rule_check: "needs rule check (family not in auto-publish rule; check.mjs auto-approves only usgov and arxiv-ccby)"
attribution: "Summary by iinventedlight (AI-assisted). Sources: Vue.js docs, Lifecycle Hooks, CC BY 4.0, text only (vuejs/docs); Vue.js docs, Template Refs, CC BY 4.0, text only (vuejs/docs)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-04
status: published
checked_on: 2026-11-04
as_of: 2026-11-04
confidence: medium
untested: "No code was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-ai-eng: Vue"
tags: ['vue', 'lifecycle', 'components']
sources:
  - id: S1
    title: "Lifecycle Hooks"
    publisher: Vue.js docs
    url: https://vuejs.org/guide/essentials/lifecycle.html
    accessed: 2026-11-04
    license: "CC BY 4.0, text only (vuejs/docs)"
  - id: S2
    title: "Template Refs"
    publisher: Vue.js docs
    url: https://vuejs.org/guide/essentials/template-refs.html
    accessed: 2026-11-04
    license: "CC BY 4.0, text only (vuejs/docs)"
---
# Lifecycle hooks in Vue

**Answer:** Each Vue component instance goes through a series of initialization steps when it's created. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages. (S1)

## Common hooks

- The most commonly used hooks are onMounted, onUpdated, and onUnmounted. (S1)
- When calling onMounted, Vue automatically associates the registered callback function with the current active component instance. (S1)
- This requires these hooks to be registered synchronously during component setup. (S1)
- You should avoid using arrow functions when declaring lifecycle hooks, as you won't be able to access the component instance via this if you do so. (S1)

## Template refs need mounting

- A template ref allows us to obtain a direct reference to a specific DOM element or child component instance after it's mounted. (S2)
- Note that you can only access the ref after the component is mounted. (S2)
- This may be useful when you want to programmatically focus an input on component mount, or initialize a 3rd party library on an element. (S2)

## Claims
- id: C1
  claim: Lifecycle hooks run at specific stages.
  source: S1
  evidence: "giving users the opportunity to add their own code at specific stages."
- id: C2
  claim: Hooks must be registered synchronously.
  source: S1
  evidence: "This requires these hooks to be registered synchronously during component setup."
- id: C3
  claim: Refs are available after mount.
  source: S2
  evidence: "Note that you can only access the ref after the component is mounted."
- id: C4
  claim: Avoid arrow functions in hooks.
  source: S1
  evidence: "Note this means you should avoid using arrow functions when declaring lifecycle hooks"

## Sources
- [S1] Lifecycle Hooks. Vue.js docs. https://vuejs.org/guide/essentials/lifecycle.html . License: CC BY 4.0, text only (vuejs/docs). Accessed 2026-11-04.
- [S2] Template Refs. Vue.js docs. https://vuejs.org/guide/essentials/template-refs.html . License: CC BY 4.0, text only (vuejs/docs). Accessed 2026-11-04.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).