vue ref 使用方法

Vue中的`ref`是一个特殊类型的响应式属性，它用于在模板中创建可读写的计算属性，并返回一个可以访问该值的引用。`ref`的主要使用方法如下：

1. 定义ref：

   <template>
     <div>
       <input v-model="text" ref="myInput">
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         text: ''
       };
     },
     setup() {
       const myInput = ref(null); // 创建ref并赋值为null，将在渲染完成后自动绑定到元素
       myInput.value = this.text; // 后续可以直接操作这个ref的值
     }
   }
   </script>

2. 访问ref：
可以通过`.value`属性获取ref对应的DOM元素或值，也可以直接使用变量名访问。

3. 监听变化：
当ref所绑定的值发生变化时，`setup()`函数会自动更新。若需要手动监听ref的变化，可以使用`watch`：

   watch(myInput, (newVal) => {
     console.log('输入框内容改变:', newVal);
   });

4. 动态绑定：
如果ref是动态生成的，可以在模板中使用`v-bind`或点语法动态绑定：

   <button @click="showAnotherRef">显示新ref</button>
   <template #dynamicRef>
     <input v-model="anotherText" ref="anotherInput">
   </template>

然后在脚本里处理动态切换：

   methods: {
     showAnotherRef() {
       this.$refs.anotherInput !== null && (this.$refs.myInput.value = '');
       this.$nextTick(() => (this.$refs.anotherInput.value = '初始值'));
     }
   }