vue ref是干嘛用的

// 使用 Vue 3 的 <script setup> 语法
<template>
  <div>
    <input v-model="message" ref="inputRef" />
    <p>{{ message }}</p>
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

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

// 创建一个响应式引用
const message = ref('');
const inputRef = ref(null);

// 在组件挂载后自动聚焦输入框
onMounted(() => {
  if (inputRef.value) {
    inputRef.value.focus();
  }
});

// 点击按钮时聚焦输入框
const focusInput = () => {
  if (inputRef.value) {
    inputRef.value.focus();
  }
};
</script>

解释说明：

• ref 是 Vue 3 中用于创建对 DOM 元素或子组件实例的引用。它可以帮助我们在 JavaScript 中直接访问这些元素。
• 在上面的例子中，我们使用了 ref="inputRef" 来给 <input> 元素绑定一个引用。
• 我们可以在 setup 函数中通过 ref() 创建一个响应式的引用变量 inputRef，并在需要的时候通过 inputRef.value 访问该元素。
• onMounted 钩子用于在组件挂载完成后执行一些操作，这里我们用它来自动聚焦输入框。
• focusInput 方法用于在点击按钮时手动聚焦输入框。

如果你希望了解更多关于 ref 的用法，可以参考 Vue 官方文档。