vue3 获取页面上ref的值

在Vue 3中，`ref` 是一种响应式的组件属性，它会跟踪其绑定的值，并在值改变时自动更新视图。获取`ref`的值通常有两种方式：

1. **直接访问**:
- 如果`ref`已经初始化并绑定了数据，可以直接在模板中通过`.value`属性获取它的当前值，例如：

     <template>
       <div ref="myRef">{{ myRef.value }}</div>
     </template>

     <script setup>
       const myRef = ref(0); // 初始化一个ref
     </script>

2. **在setup()中获取**:
- 如果你想在更复杂的逻辑环境中获取`ref`的值，可以在`setup()`函数内部使用`reactive()`或`ref()`提供的getter方法，如下所示：

     import { ref } from 'vue';

     setup() {
       const myValue = ref();
       
       function getValue() {
         return myValue.value;
       }

       // 更新myValue的值
       // ...
       
       return { getValue };
     }

然后在需要的地方通过`getValue()`函数获取值。

记得在使用`ref`时，你应该经常更新它的值以反映实际状态的变化，否则视图不会自动刷新。