ref和$refs

### Vue.js 中 ref 和 $refs 的用法及区别 在 Vue.js 中，`ref` 和 `$refs` 是用于直接访问 DOM 元素或子组件实例的工具。以下是它们的详细用法及区别。 #### 1. `ref` 的用法 `ref` 是一个特性，可以绑定到 DOM 元素或子组件上。当绑定到 DOM 元素时，`ref` 提供对实际 DOM 节点的引用；当绑定到子组件时，`ref` 提供对该组件实例的引用[^1]。 - **Vue 2** 中，`ref` 可以通过 `this.$refs.refName` 访问。 - **Vue 3** 中，`ref` 可以结合 `<script setup>` 使用，更简洁地通过 `ref.value` 访问绑定的元素或组件实例[^2]。 示例代码如下： ```vue <template> <div> <p ref="paragraph">Hello World</p> <ChildComponent ref="childRef" /> <button @click="handleClick">点击我</button> </div> </template> <script> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default { setup() { const paragraph = ref(null); const childRef = ref(null); const handleClick = () => { console.log(paragraph.value); // 访问 DOM 元素 childRef.value.someMethod(); // 调用子组件方法 }; return { paragraph, childRef, handleClick }; }, }; </script> ``` #### 2. `$refs` 的用法 `$refs` 是一个对象，包含了所有通过 `ref` 属性注册的元素或组件实例。它可以直接通过 `this.$refs` 在 Vue 实例中访问[^1]。 - **Vue 2** 中，`$refs` 是访问多个 `ref` 的统一入口。 - **Vue 3** 中，虽然仍支持 `$refs`，但推荐使用组合式 API 中的 `ref` 来替代[^2]。 示例代码如下： ```vue <template> <div> <input ref="input" type="text" /> <button @click="focusInput">聚焦输入框</button> </div> </template> <script> export default { methods: { focusInput() { this.$refs.input.focus(); // 使用 $refs 访问 DOM 元素 }, }, }; </script> ``` #### 3. `ref` 和 `$refs` 的区别 | 特性 | `ref` | `$refs` | |---------------------|-----------------------------------------------------------------------------------------|-------------------------------------------------------------------------| | **作用** | 绑定响应式变量或 DOM/组件引用 | 访问所有通过 `ref` 注册的 DOM 元素或组件实例 | | **访问方式** | Vue 3 中使用 `ref.value`[^2] | Vue 2 和 Vue 3 中使用 `this.$refs.refName`[^1] | | **适用场景** | 单个 DOM 元素或组件实例的访问[^1] | 多个 `ref` 的统一访问 | | **响应式** | Vue 3 中的 `ref` 是响应式的[^2] | `$refs` 不是响应式的，不能在模板中直接使用[^1] | #### 4. 最佳实践 - 在 Vue 3 中，推荐使用组合式 API 的 `ref` 来替代 `$refs`，因为 `ref` 更加灵活且易于测试。 - 避免过度依赖 `ref` 和 `$refs`，尽量通过声明式的方式（如 `props` 和 `emit`）与子组件通信[^2]。 --- ### 示例代码对比 #### Vue 2 使用 `$refs` ```javascript this.$refs.input.focus(); // 聚焦输入框 this.$refs.childComponent.someMethod(); // 调用子组件方法 ``` #### Vue 3 使用 `ref` ```javascript const inputRef = ref(null); const childRef = ref(null); function focusInput() { inputRef.value.focus(); // 聚焦输入框 } function callChildMethod() { childRef.value.someMethod(); // 调用子组件方法 } ``` ---