A brief analysis of the difference between Ref operation Dom in Vue2.x and Vue3.x

Why is Ref operating Dom both easy to use and efficient? The following article will talk about Ref operation, introduce the essence of Ref obtaining Dom, its difference between Vue2.x and Vue3.x, etc. I hope it will be helpful to everyone!

Before developing a project, we often do a needs analysis first. For the front-end, we can research or choose a basic component library to improve our Work efficiency. After all, for a company that cares about time costs, it won't give you time to watch TV series and play games to develop a calendar-like component. However, not all component libraries on the market can meet our needs. At this time, we need to handwrite the components ourselves to apply them to the project.

And this is what I want to say: How to design components so that they are easy to apply (or reduce the amount of code), while also improving scalability and facilitating demand changes and subsequent maintenance?

There are many ways, and using Ref to operate Dom is one of them, but this method allows us to maintain and operate Modal, Popup, and frequently operate Dom display and When hiding interactive components, it plays a great advantage. [Related recommendations: vuejs video tutorial, web front-end development]

The relevant knowledge points and application examples of Ref operating Dom are divided into several aspects. Let’s do the analysis

• Ref gets the essence of Dom
• The difference between Ref operating Dom in Vue2.x and Vue3.x
• Ref operating component Dom and parent-child component single Transfer comparison

Details

Ref gets the essence of Dom

Vue object in Vue2.x The attribute $refs is actually a collection of all registered refs, and ref corresponds to the ref="xx" associated with different components or ordinary Dom elements in the template; the actual way to obtain ref in the source code is also through the native method getElementById The obtained Dom node; can be said that ref is the syntactic sugar of document.getElementById. The ref of vue3 continues the usage of vue2, and also adds a function of creating responsive data

Some people may ask, since both ref and getElementById can get Dom, then in the project During development, does it make no difference which method I choose?

Regarding this issue, data shows that $refs will reduce the consumption of obtaining dom nodes compared to the document.getElementById method; the specific reasons will be discussed in detail in the next article.

The difference between Ref operation Dom in Vue2.x and Vue3.x

Vue2.x

We only need to add the ref="xx" attribute to the corresponding Dom element or component, and then use this.$refs.xx in the Vue object to directly obtain the Dom and operate its method attributes,

或者
dd

// $refs
showManagerModal () {
  this.$refs.avaUserTreeSelect.showModal(this.form.managers)
  console.log(this.$refs.user.text)
},

Vue3.2

The method used in the Vue3.2 version

//普通Dom

//组件

Maybe someone here has questions about why a constant with the same name as the template's ref is declared Are variables bound to the corresponding DOM? Here’s a little additional explanation:

• Vue3’s support for composition api in earlier versions (before 3.0.0-beta.21) can only be done in the component option setup function used in. The corresponding variables are all returned in the setup() method {write the variables or methods that need to be used in the template}

• In version 3.0.0-beta.21 Added experimental features of
  Copy after login