Example of refs usage method in Vue3

Preface

In Vue 3, the usage of refs has improved a few times compared to Vue 2, but the basic concept is still the same: refer to elements or component instances in the template through ref, and then access these references through this.$refs in the component's method or lifecycle hook.

However, in Vue 3's Composition API, we prefer to use the ref function to create responsive references rather than using this.$refs. This method makes the code more flexible and easier to use in combinatorial functions.

Below I will show the refs writing of the Options API and Composition API in Vue 3 respectively.

Use the Options API Options

In the Options API, refs is used similarly to Vue 2:

<template>
  <div ref="myDiv">Hello, Vue 3!</div>
  <button ref="myButton" @click="handleClick">Click me</button>
</template>

<script>
export default {
  mounted() {
    // Access elements via this.$refs    const myDiv = this.$;
    const myButton = this.$;
    (myDiv); // Output div DOM element    (myButton); // Output button DOM element  },
  methods: {
    handleClick() {
      const myButton = this.$;
      // Here you can operate on myButton    }
  }
}
</script>

Using Composition API Composition

In the Composition API, you use the ref function to create responsive references and access them in the setup function:

<template>
  <div ref="myDiv">Hello, Vue 3!</div>
  <button @click="handleClick">Click me</button>
</template>

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

export default {
  setup() {
    // Create responsive references using ref function    const myDiv = ref(null);

    // Lifecycle hook is implemented through functions in the Composition API    onMounted(() => {
      (); // Output div DOM element    });

    // Methods are also returned as functions    const handleClick = () => {
      (); // Output div DOM element      // You can operate on    };

    // Returns responsive references and methods that need to be used in the template    return {
      myDiv,
      handleClick
    };
  }
}
</script>

In the Composition API example, we used the ref function to create a responsive reference to myDiv and bind it to the div element in the template. In the setup function, we can directly access to get the corresponding DOM element. Note that since ref creates a wrapper object, we need to access or modify its value through .value.

onMounted is a life cycle hook provided by Vue 3's Composition API, which is equivalent to the mounted hook in the Options API. In onMounted, we can safely access the DOM element because the component has been mounted to the DOM at this time.

Finally, the setup function returns an object containing responsive references and methods that need to be used in the template. This way, the ref in the template can be associated with the responsive references defined in the setup.

Summarize

This is the end of this article about how to use refs in Vue3. For more related content on using refs, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!