Two ways to obtain element DOM in Vue3

There are two ways to get dom in Vue3: ref template reference and traditional method

Template reference

Template citation is an official method, please see the following example:

<template>
    <canvas ref="solarCanvas"  width="1300" height="900"></canvas>
</template>

<script setup>
import {  onMounted, ref } from 'vue'

const solarCanvas = ref(null)
onMounted(() => {
  ()//HTMLCanvasElement{...}
})
</script>

It should be noted here that onlyAfter the component is mountedOnly by accessing template references, in the example aboveonMountedThe component was already mounted when executing, so printsolarCanvasThere is a value.

<template>
    <canvas ref="solarCanvas"  width="1300" height="900"></canvas>
</template>

<script setup>
import {  onMounted, ref } from 'vue'

const solarCanvas = ref(null)
()//null
</script>

On the contrary, if the printed value is written like this, it isnull, because the component has not been mounted yet.

2. Traditional methods

The traditional method refers to the method of obtaining dom using JS natively, such as:getElementById、querySelectorwait. Please see the following example:

<template>
    <canvas  width="1300" height="900"></canvas>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'

onMounted(() => {
  const canvas = ('solar')
  (canvas)//HTMLCanvasElement{...}
})
</script>

Expansion: Several ways to obtain DOM nodes by Vue3

1.Native js obtain DOM node:

(Selector)
(idSelector)
(classSelector)
....

2. Get the instance object of the current component in vue2:

Because each vue component instance contains a $refs object, which stores the corresponding DOM element or component reference. So by default, the component's $refs points to an empty object.

You can first add ref="name" to the component, and then use this.$refs.name to get the corresponding element and operate it.

<template>
  <div class="box">
    <h1 ref="divDom">This is a test sample</h1>
    <button ref="but">Button</button>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
    }
  },
  methods: {
    showThis(){
      // instance object of h1      (this);
      this.$='yellow'
      //After referring to the component's instance, you can also call the methods method on the component      this.$();
    },
  },
}
</script>

3. Get the instance object of the current component in vue3:

In the Vue3 framework, this object is removed, so the DOM node of the custom component ref cannot be obtained using this.$refs method.

However, vue3 comes with a function that can return the current component instance object. By obtaining the object through this function, you can see that the object contains refs in the interface.

<template>
    <div ref="divDom"></div>
</template>
 
<script setup>
    import { ref, getCurrentInstance } from 'vue';
    
    const divDom = ref(null);
    onMounted(()=>{
        ('Get dom element',divDom)
    })
 
    // Get the instance object of the page    const pageInstance = getCurrentInstance();
    // Get the dom node object    const tagDomObj = ;
 
</script>

3. Conclusion

In Vue3, there are two main methods to obtain DOM: template reference and traditional method.

But it should be noted that no matter which method is used, the DOM can only be obtained after the component is mounted.watchoronMountedMake sure you have obtained the DOM.

This is the end of this article about two methods of obtaining element DOM in Vue3. For more related content on obtaining DOM in Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!