Hello Everyone,
Welcome to my blog 🙏. I hope you are all safe and that this blog finds you in good health ❤️.
In my previous blogs, We have learnt about
👉 UseEffect hook of React and Created & Mounted hooks of VueJs.
👉 UseEffect hook of React and Computed & Watch properties of VueJs
If you missed it, please check out the above links or here.
In this blog, let’s learn about useRef() hook of React and also achieve the same in VueJs using Template Refs.
So, with no more delay, let’s dive into the topic.
Introduction
Whether it is VueJs or React, the most common use case of Refs is to access DOM elements that are mounted on the page.
As usual, let’s understand them with a scenario.
Scenario 4
Goku wants to access that static value in the DOM and do some manipulations with it. He was pretty sure about React that it can be accessed using useRef() hook but he doesn’t have an idea of doing it VueJs. But, No worries we are here to help him 😎.
Let’s first try out the same thing in React using the useRef() hook
useRef() hook of React
Template Refs in VueJs
If I say to you that in Vue, we neither import nor declare any refs. Isn’t awesome? Yes, it’s right, there is no need and Vue takes care of it.
this.$refs will have all the refs of the page and can be accessed as an Object i.e key & value.
This way Refs can be handled in VueJs & React
---------------------------------------------------------------------------------------------------------
Please check the working code of the above examples
👉 Vue Examples 👉 React Examples
For more information, please refer to the below links👇
👉 Ref in VueJs 👉 useRef of React.
---------------------------------------------------------------------------------------------------------
Here we go, That’s it folks for this blog.
Hope everyone liked it.
If you like it, give it a love ❤️, and share it with your friends.
For more exciting content on Frontend,
Please do follow me 🎯.
Thanks a lot, Everyone 🙏.
Until Next time, Happy Learning ✍️
Abhishek Kovuri, UI developer