vue3定义ref

### Vue 3 中 `ref` 的定义方法及用法 在 Vue 3 中，`ref` 是一种响应式数据的创建方式之一，主要用于声明基本类型的响应式变量（如字符串、数字等），也可以用来引用 DOM 元素或子组件实例。 #### 定义 `ref` 可以通过引入 Vue 提供的 `ref` 方法来定义一个响应式的变量。该方法接受一个初始值作为参数，并返回一个带有 `.value` 属性的对象。如果需要访问或修改这个变量，则需通过 `.value` 进行操作[^1]。 #### 使用示例 以下是几个常见的使用场景及其代码示例： --- ##### 场景一：定义并操作基础类型的数据 可以利用 `ref` 创建一个可变的基础类型变量，如下所示： ```javascript import { ref } from 'vue'; export default { setup() { const count = ref(0); function increment() { count.value++; // 修改 .value 才能更新数据 } return { count, increment }; } }; ``` 在这个例子中，`count` 被初始化为 `0`，并通过按钮点击事件触发 `increment()` 函数实现数值增加[^2]。 --- ##### 场景二：获取 DOM 元素的引用 除了用于管理状态外，`ref` 还可用于捕获页面上的 DOM 元素。当组件挂载完成后，可通过其 `.value` 访问到实际的 DOM 对象。 ```html <template> <input ref="inputRef" type="text"> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const inputRef = ref(null); onMounted(() => { console.log(inputRef.value); // 获取输入框的 DOM 实例 inputRef.value.focus(); // 自动聚焦于输入框 }); return { inputRef }; } }; </script> ``` 在此处，我们先将 `null` 设置给 `inputRef`，待组件完成渲染后，在生命周期钩子 `onMounted` 内部打印出真实的 DOM 输入框对象，并对其执行自动聚焦的操作[^3]。 --- ##### 场景三：调用子组件的方法 假如父组件想要控制某个子组件的行为，比如调用它的内部方法，那么就可以借助 `ref` 来达成目标。 ```html <!-- 子组件 --> <template> <div>这是一个子组件。</div> </template> <script> export default { methods: { greet() { alert('你好！'); } } }; </script> ``` ```html <!-- 父组件 --> <template> <ChildComponent ref="childInstance"></ChildComponent> <button @click="invokeChildMethod">调用子组件方法</button> </template> <script> import ChildComponent from './ChildComponent.vue'; import { ref } from 'vue'; export default { components: { ChildComponent }, setup() { const childInstance = ref(null); function invokeChildMethod() { childInstance.value.greet(); } return { childInstance, invokeChildMethod }; } }; </script> ``` 上述代码展示了如何通过设置 `ref="childInstance"` 并结合 `.value` 去触碰子组件内的公开接口——即这里的 `greet()` 方法。 --- ### 总结 综上所述，Vue 3 的 `ref` 不仅能够帮助开发者轻松处理简单数据的变化跟踪问题，还提供了便捷的方式来抓取特定节点或者交互其他嵌套结构下的逻辑单元。