Template Refs vs Custom Directive - What is the difference?

The Vue docs has similar examples to auto-focus an element when mounted using Template Ref & a Custom Directive.

Apart from the fact that custom directives can be registered globally, is there any other real difference that determines when we should prefer one over the other? Thanks in advance.

In this case, there’s no difference.

1 Like

Thanks! Let me re-phrase my question.

As template refs provide a reference to the DOM element, can we assume that whatever that can be achieved using a template ref can be achieved using a custom directive?

I’m guessing one “big” difference between them is when the element you want to access is conditionally shown. Then it’s probably much easier to use a custom directive to correctly initialize the element.

1 Like