What are refs in Vue 3 and how do I use them?

What are refs in Vue 3 and how do I use them?

Refs in Vue 3 are a way to directly access DOM elements or component instances. You can create a ref using the ref function and then bind it to an element in your template.

Can you show me a simple example of using refs?

Sure! Here's a basic example:

<template>
  <div>
    <input ref="myInput" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

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

export default {
  setup() {
    const myInput = ref(null);
    const focusInput = () => {
      myInput.value.focus();
    };
    return { myInput, focusInput };
  }
};
</script>

What happens if I try to access a ref before it's defined?

If you try to access a ref before it's defined, it will be null. You should ensure that the ref is set before trying to use it, typically after the component has mounted.