vue3 ref使用方法

### Vue3 中 `ref` 的使用方法 在 Vue3 中，`ref` 是用于创建一个响应式的引用对象。这个对象有一个指向内部值的 `.value` 属性。当该属性被访问或修改时，依赖于它的模板部分会自动更新。 #### 基本用法 定义一个简单的 `ref` 变量并将其绑定到模板中： ```html <template> <div>{{ count }}</div> </template> <script setup lang="ts"> import { ref } from 'vue' const count = ref(0) // 修改 ref 的值 count.value++ </script> ``` 这段代码展示了如何声明一个名为 `count` 的 `ref` 对象，并初始化为数值 `0`[^1]。通过操作 `count.value` 来改变其存储的数据，在视图上也会相应地反映出这些更改。 #### 绑定事件处理程序来变更 Ref 数据 可以将 `ref` 和事件处理器一起使用，以便用户交互能够触发数据的变化： ```html <template> <button @click="increment">点击增加计数器</button> <p>当前计数: {{ counter }}</p> </template> <script setup lang="ts"> import { ref } from 'vue' const counter = ref<number>(0); function increment() { counter.value += 1; } </script> ``` 此示例中定义了一个按钮元素和一段文本显示区。每当按下按钮时就会调用 `increment()` 函数使 `counter` 加一，并实时反映在页面上的 `<p>` 标签内[^2]。 #### 将 DOM 元素作为 Ref 进行引用 除了用来保存普通的 JavaScript 类型外，还可以利用 `ref` 关键字获取对实际 DOM 节点或者子组件实例的引用： ```html <template> <input type="text" v-model="message" ref="myInput"/> <button @click="focusOnInput">聚焦输入框</button> </template> <script setup lang="ts"> import { onMounted, ref } from 'vue'; let myInput = ref<HTMLInputElement | null>(null); onMounted(() => { if(myInput.value){ myInput.value.focus(); } }); function focusOnInput(){ if(myInput.value){ myInput.value.focus(); } } </script> ``` 上述例子演示了怎样把 HTML 输入域设置成可选类型的 `ref` 并且可以在挂载完成后立即获得焦点；另外还提供了一种方式让用户再次点击按钮后重新定位光标至该字段处[^3]。 #### 结合计算属性与侦听器工作 有时可能希望基于其他状态变量动态调整某些逻辑，则可以通过组合 `computed` 或者 `watchEffect/watch` 实现这一点： ```html <template> <span>{{ fullName }}</span> </template> <script setup lang="ts"> import { computed, ref, watch } from 'vue'; const firstName = ref('John'); const lastName = ref('Doe'); const fullName = computed(() => `${firstName.value} ${lastName.value}`); watch(firstName, (newValue) => { console.log(`First Name changed to ${newValue}`); }); </script> ``` 这里不仅介绍了如何借助 `computed` 创建派生的状态，同时也给出了监听特定 `ref` 发生变动的方法，从而执行额外的操作或是日志记录等功能[^4]。