<script setup>中怎么使用ref

在 Vue 3 中，`<script setup>` 部分引入了新的模板语法，它消除了 `this` 关键字，使得组件更简洁易读。如果你想使用 `ref` 来管理组件内的响应式数据或DOM元素，你可以按照以下步骤进行：

1. **创建 ref**：
使用 `ref` 函数声明变量，它返回一个 `Ref<T>` 类型的引用，这个引用的数据会在组件渲染时自动更新。

   <template>
     <div @click="handleClick">{{ counter }}</div>
   </template>

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

   const count = ref(0);
   </script>

在这里，`count` 是一个 ref，初始值为 0，每次点击 div 时，`handleClick` 方法会被调用并更新计数器。

2. **访问和修改 ref**：
可以直接像属性一样访问和修改 ref 的值。

   function handleClick() {
     count.value += 1; // 修改值
   }

3. **监听变化**：
如果你想在 ref 的值发生变化时执行某些操作，可以使用 `onUpdate` 或者 `.sync` 特性（适用于非字符串类型）。

   const countSync = ref(0).sync;
   
   function handleClick() {
     countSync(1); // 直接赋值，相当于 count.value++
   }

4. **解绑事件或移除 ref**：
当不再需要某个 ref 时，推荐使用 `off()` 或者 `unref()`（如果不需要访问原始值）来解除绑定。

   function unbindCount() {
     count.off('update', handleCountChange);
   }