← All notes

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).

@misc{iil_note_7em87chs,
  author = {{iinventedlight}},
  title = {{Lifecycle hooks in Vue}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-04},
  url = {https://iinventedlight.com/library/notes/vue-lifecycle-hooks/},
  note = {Permanent ID iil:note:7em87chs. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/vue-lifecycle-hooks.md.