Lifecycle and Template Refs#

So far, Vue has been handling all the DOM updates for us, thanks to reactivity and declarative rendering. However, inevitably there will be cases where we need to manually work with the DOM.

We can request a template ref - i.e. a reference to an element in the template - using the special ref attribute:

<p ref="pElementRef">hello</p>

const pElementRef = ref(null)

setup() {
  const pElementRef = ref(null)

  return {
    pElementRef
  }
}