vue ref的使用

Vue中的`ref`是Vue 2.x及以上版本提供的一种指令，用于创建响应式的数据绑定，通常用于操作DOM元素或者自定义组件内部的状态。`ref`的主要作用有：

1. **声明变量**：`<div ref="myRef"></div>`，这会在模板实例上创建一个名为`myRef`的引用，你可以通过`.value`获取或设置这个变量的值。

2. **访问DOM元素**：`this.$refs.myRef`会返回一个DOM对象，可以用于直接操作元素，如修改样式、添加事件监听等。

3. **属性绑定**：你可以将`ref`作为属性传递给自定义组件，并通过它动态获取组件的实例。

4. **计算属性**：结合`reactive`或`watch`，可以在数据变化时自动更新视图。

举个例子：

<button @click="handleClick">点击我</button>
<script setup>
import { ref } from 'vue';

const button = ref(null); // 创建一个ref并绑定到按钮元素

function handleClick() {
  if (button.value) {
    button.value.style.color = 'red'; // 修改按钮颜色
  }
}
</script>