VueJS: is there any performance benefit for using vue refs instead of css id to control a div element

user_7588447 0
Viewed 478

I tried to find a comparison or a reason to why Vue has refs to control an element instead of using classic css ids to control some element like a div for example, can someone explain the difference? is there a performance advantage for refs?

<div ref="hello">
</div>

<div id="hello">
</div>

Update:

I am not asking about this for opinion based answers or just styles, I am searching for any clue regarding performance difference between the 2 approaches

vue.js javascript
1 Answers

The benefits of ref that i see :

  • The syntax is Vue friendly this.$refs.hello

  • They could be used to reference component <HelloWorld ref="hello" /> which could be used in parent to run some child component logic

  • The ref could be used in v-for loop to return array of elements

When used on elements/components with v-for, the registered reference will be an Array containing DOM nodes or component instances

  • They are not exposed outside the Vue app context.
user_81728570
Related