vue3如何使用￥refs

Vue3中的`ref`是响应式数据创建的一种机制，用于存储组件内部的值，并可以跟踪该值的变化。它是基于React的`useState`和`useRef`的概念，但在Vue中更加强大，因为它可以绑定到任意复杂的DOM元素。

使用`v-model`指令时，`ref`会自动处理双向绑定，例如：

<input type="text" v-model="nameInput" ref="nameInputRef">

在这个例子中，`nameInput`是一个普通的JavaScript变量，而`nameInputRef`是一个`ref`实例，它将自动更新当文本框的内容改变时。你可以通过`.value`属性获取或设置其值：

console.log(this.nameInputRef.value); // 获取输入框的值
this.nameInputRef.value = '新的名字'; // 设置输入框的值

对于直接操作DOM的情况，如点击按钮更改某个元素的样式，可以这样做：

<button @click="changeStyle">Change Style</button>
<div ref="myDiv"></div>

<script>
methods: {
  changeStyle() {
    this.$refs.myDiv.style.backgroundColor = 'red';
  }
}
</script>

这里，当你点击按钮时，会调用`changeStyle`方法，该方法可以直接访问并修改`myDiv`元素的样式。