vue3 使用refs

在 Vue3 中，使用 `refs` 能够轻松地访问 DOM 元素、组件实例以及其他数据。它是一个特殊的对象，可以在模板中使用 `ref` 指令来绑定一个元素或组件实例，也可以在 JavaScript 中使用 `ref` 函数来创建一个响应式的引用对象。

## 在模板中使用 refs

在模板中使用 `ref` 指令，可以将一个元素或组件实例绑定到一个变量上，从而能够在 JavaScript 中访问这个元素或组件实例。例如：

<template>
  <div>
    <button ref="myButton" @click="handleClick">Click me</button>
  </div>
</template>

在上面的例子中，我们使用 `ref` 指令将一个 `button` 元素绑定到 `myButton` 变量上。在 `handleClick` 方法中，我们可以通过 `this.$refs.myButton` 访问这个元素，从而可以修改它的属性或方法。

## 在 JavaScript 中使用 refs

除了在模板中使用 `ref` 指令外，还可以在 JavaScript 中使用 `ref` 函数来创建一个响应式的引用对象。例如：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increase = () => {
      count.value++
    }
    return {
      count,
      increase
    }
  }
}

在上面的例子中，我们使用 `ref` 函数来创建一个名为 `count` 的响应式引用对象，并将其初始值设置为 `0`。我们还定义了一个名为 `increase` 的方法，该方法将 `count` 的值加 `1`。在 `setup` 函数中，我们通过 `return` 语句将 `count` 和 `increase` 暴露给模板使用。

## 总结

在 Vue3 中，使用 `refs` 能够轻松地访问 DOM 元素、组件实例以及其他数据。它是一个特殊的对象，可以在模板中使用 `ref` 指令来绑定一个元素或组件实例，也可以在 JavaScript 中使用 `ref` 函数来创建一个响应式的引用对象。通过使用 `refs`，我们可以更方便地操作 DOM 元素、组件实例以及其他数据，从而提高开发效率。